A Pen by azzoune.

css3-transitions--.markdown

css3 transitions

A Pen by azzoune on CodePen.

License.

index.html

<div class="box">
  <div class="head">
    <span class="caption">
      <h4>Running</h4>
      <h5>gender</h5>
       <ul>
        <li><a href="#">Men</a></li>
        <li><a href="#">Women</a></li>
        <li><a href="#">Kids</a></li>
       </ul>
      <h5>category</h5>
       <ul>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Clothing</a></li>
        <li><a href="#">Gear</a></li>
       </ul>
    </span>
  </div>
  <img src="https://dl.dropboxusercontent.com/u/330966/static/running01.jpg" />
</div>

style.css

@import url('http://fonts.googleapis.com/css?family=Dosis:300,600');
.box, .box:before, .head, .caption  {display:block;}
.box:before, .head, .caption  {position:absolute;}
.box {
  position:relative;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  width:500px;
  height:330px;
  margin:5rem auto;
  padding-left:0px;
  overflow:hidden;
  background:skyblue;
  -webkit-box-shadow:7px 7px 0px rgba(0,0,0,0.2);
  -moz-box-shadow:   7px 7px 0px rgba(0,0,0,0.2);
  box-shadow:        7px 7px 0px rgba(0,0,0,0.2);
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}
.box:before  {
  content:'top running collections';
  color:#000;
  top:13px;
  right:13px;
  padding:10px;
  background:white;
  letter-spacing:2px;
  font-size:1rem;
  font-weight:600;
  text-transform:uppercase;
  -webkit-box-shadow:1px 1px 0px skyblue,
                     2px 2px 0px skyblue,
                     3px 3px 0px skyblue;
  -moz-box-shadow:1px 1px 0px skyblue,
                  2px 2px 0px skyblue,
                  3px 3px 0px skyblue;
  box-shadow:1px 1px 0px skyblue,
             2px 2px 0px skyblue,
             3px 3px 0px skyblue;
  -webkit-transition: all 0.5s;
  -moz-transition:    all 0.5s;
  -ms-transition:     all 0.5s;
  -o-transition:      all 0.5s;
  transition:         all 0.5s;
}
.box:hover  {
  padding-left:100px;
  -webkit-box-shadow:3px 3px 0px rgba(0,0,0,0.5);
  -moz-box-shadow:   3px 3px 0px rgba(0,0,0,0.5);
  box-shadow:        3px 3px 0px rgba(0,0,0,0.5);
}
.box:hover:before  {right:-300px;}
.head {
  height:100%;
  width:650px;
  top:0px;
  left:-155px;
  margin:0px;
  padding-left:20px;
  background:transparent;
  -webkit-transition: all 0.45s;
  -moz-transition:    all 0.45s;
  -ms-transition:     all 0.45s;
  -o-transition:      all 0.45s;
  transition:         all 0.45s;
}
.head:hover  {
  left:0px;
}
.caption {
  background:skyblue;
  height:100%;
  padding:15px 20px 0px 0px;
}
h4 {
  font-size:2rem;
  font-weight:300;
  line-height:2.4rem;
  padding:0px;
  margin:0px;
  text-transform:uppercase;
}
h5 {
  padding:0px;
  margin:0px;
  font-size:1.2rem;
  font-weight:600;
  font-variant:small-caps;
  letter-spacing:1px;
}
ul {list-style-type:none;list-style-position:inside;margin:0px;padding:0px;}
ul li {
  margin:0px;
  padding-left:13px;  
  font-size:1.2rem;
  line-height:1.6rem;
}
ul li a {
  margin-top:0px;
  color:#000;
  text-decoration:none;
  padding-left:0px; 
  -webkit-transition: all 0.1s;
  -moz-transition:    all 0.1s;
  -ms-transition:     all 0.1s;
  -o-transition:      all 0.1s;
  transition:         all 0.1s;
}
ul li a:hover {padding-left:5px;}
body {
  font-family: 'Dosis', sans-serif;
  background: url('https://dl.dropboxusercontent.com/u/330966/static/pixelt.png') #fd9500;
  font-weight:300;
}