E-Commerce Card

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; }
JAVASCRIPT
Expand for more options Login