<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="snip1560"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample23.jpg" alt="pr-sample23" /> <figcaption> <h4>Fleece Marigold</h4> <h2>World <span>Delivery</span></h2> <h3>Shop Now</h3> </figcaption> <a href="#" class="link"></a> </figure> <figure class="snip1560"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample24.jpg" alt="pr-sample24" /> <figcaption> <h4>Norman Gordon</h4> <h2>Summer <span>Sale</span></h2> <h3>Read More</h3> </figcaption> <a href="#" class="link"></a> </figure> <figure class="snip1560"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample25.jpg" alt="pr-sample25" /> <figcaption> <h4>Ruby Von Rails</h4> <h2>Forever <span>Young</span></h2> <h3>Details</h3> </figcaption> <a href="#" class="link"></a> </figure>

@import url(https://fonts.googleapis.com/css?family=Open+sans:700); @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url(https://fonts.googleapis.com/css?family=Playfair+Display); .snip1560 { font-family: 'Open Sans', Arial, sans-serif; display: inline-block; margin: 8px; min-width: 230px; max-width: 315px; width: 100%; color: #ffffff; text-align: center; font-size: 14px; box-shadow: none !important; position: relative; padding: 10px; border: 2px solid #e8b563; -webkit-box-sizing: border-box; box-sizing: border-box; } .snip1560:before { content: ''; background-color: #000000; position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; z-index: -1; } .snip1560 * { -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .snip1560 img { max-width: 100%; vertical-align: top; background-image: linear-gradient(#000000, #ffffff); } .snip1560 figcaption, .snip1560 .link { position: absolute; top: 20px; bottom: 20px; left: 20px; right: 20px; } .snip1560 h2, .snip1560 h3, .snip1560 h4 { margin: 0px; position: absolute; width: 100%; text-transform: uppercase; } .snip1560 h2 { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 2em; font-family: 'Playfair Display', Arial, sans-serif; } .snip1560 h2 span { color: #e8b563; } .snip1560 h3 { font-size: 1.3em; bottom: 0; font-weight: 700; letter-spacing: 2px; } .snip1560 h4 { top: 0; font-size: 1.2em; letter-spacing: 1px; font-weight: 400; opacity: 0.9; font-family: 'Playfair Display', Arial, sans-serif; } .snip1560:hover img, .snip1560.hover img { opacity: 0.35; } /* Demo purposes only */ body { background-color: #212121; text-align: center; }

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