<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <figure class="snip1423"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample57.jpg" alt="sample57" /> <figcaption> <h3>Pudol Doux</h3> <p>All this modern technology just makes people try to do everything at once.</p> <div class="price"> <s>$24.00</s>$19.00 </div> </figcaption><i class="ion-android-cart"></i> <a href="#"></a> </figure> <figure class="snip1423 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample98.jpg" alt="sample98" /> <figcaption> <h3>Kurie Secco</h3> <p>To make a bad day worse, spend it wishing for the impossible.</p> <div class="price"> <s>$29.00</s>$39.00 </div> </figcaption><i class="ion-android-cart"></i> <a href="#"></a> </figure> <figure class="snip1423"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample90.jpg" alt="sample90" /> <figcaption> <h3>Zosaisan Invec</h3> <p>Why should I have to work for everything? It's like saying that I don't deserve it.</p> <div class="price"> <s>$35.00</s>$45.00 </div> </figcaption><i class="ion-android-cart"></i> <a href="#"></a> </figure>

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url(https://fonts.googleapis.com/css?family=Oswald:300,400); .snip1423 { font-family: 'Oswald', Arial, sans-serif; position: relative; float: left; margin: 20px 1%; min-width: 230px; max-width: 315px; width: 100%; background: #ffffff; text-align: center; color: #000000; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); font-size: 16px; padding: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .snip1423 * { -webkit-box-sizing: padding-box; box-sizing: padding-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .snip1423 img { max-width: 100%; vertical-align: top; position: relative; } .snip1423 figcaption { padding: 20px 15px; } .snip1423 h3, .snip1423 p { margin: 0; } .snip1423 h3 { font-size: 1.3em; font-weight: 400; margin-bottom: 5px; text-transform: uppercase; } .snip1423 p { font-size: 0.9em; letter-spacing: 1px; font-weight: 300; } .snip1423 .price { font-weight: 500; font-size: 1.4em; line-height: 48px; letter-spacing: 1px; } .snip1423 .price s { margin-right: 5px; opacity: 0.5; font-size: 0.9em; } .snip1423 i { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); width: 56px; line-height: 56px; text-align: center; border-radius: 50%; background-color: #666666; color: #ffffff; font-size: 1.6em; border: 4px solid #ffffff; } .snip1423 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .snip1423:hover, .snip1423.hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .snip1423:hover i, .snip1423.hover i { background-color: #2980b9; } /* Demo purposes only */ body { background-color: #212121; }

/* Demo purposes only */ $(".hover").mouseleave( function () { $(this).removeClass("hover"); } );