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>
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;
}
