<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="snip0051"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample1.jpg" alt="sample1"/> <div class="icons"> <a href="#"><i class="ion-ios-home-outline"></i></a> <a href="#"><i class="ion-ios-email-outline"></i></a> <a href="#"><i class="ion-ios-telephone-outline"></i></a> </div> <figcaption> <h2>Judy <span>Havelock</span></h2> <p>If good things lasted forever, would we appreciate how precious they are?</p> </figcaption> </figure> <figure class="snip0051 hover"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample4.jpg" alt="sample4"/> <div class="icons"> <a href="#"><i class="ion-ios-home-outline"></i></a> <a href="#"><i class="ion-ios-email-outline"></i></a> <a href="#"><i class="ion-ios-telephone-outline"></i></a> </div> <figcaption> <h2>Lisl <span>Baum</span></h2> <p>Why can't I ever build character at a Miami condo or a casino somewhere?</p> </figcaption> </figure> <script> /* Demo purposes only */ $("figure").mouseleave( function () { $(this).removeClass("hover"); } ); </script>

@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800); @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); figure.snip0051 { font-family: 'Raleway', Arial, sans-serif; position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 220px; max-width: 480px; max-height: 240px; width: 100%; background: #000000; } figure.snip0051 * { -webkit-box-sizing: border-box; box-sizing: border-box; } figure.snip0051 > img { margin-left: 50%; opacity: 1; width: 50%; filter: blur(0px); -webkit-transition: all 0.35s; transition: all 0.35s; } figure.snip0051 figcaption { left: 0; position: absolute; top: 0; width: 50%; height: 100%; background: #ffffff; } figure.snip0051 figcaption h2, figure.snip0051 figcaption p { margin: 0; color: #000000; text-align: right; position: absolute; padding: 10px 0 10px 0px; margin: 0 40px 0 20px; } figure.snip0051 figcaption h2 { font-size: 1.3em; bottom: 50%; right: 0; font-weight: 300; text-transform: uppercase; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } figure.snip0051 figcaption h2 span { font-weight: 800; } figure.snip0051 figcaption p { top: 50%; font-size: 0.9em; opacity: 0.8; } figure.snip0051 .icons { padding: 5px; position: absolute; left: 50%; top: 50%; padding-left: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } figure.snip0051 .icons i { font-size: 32px; padding: 10px; color: #ffffff; opacity: 0; top: 50%; display: inline-block; -webkit-transition: all 0.35s; transition: all 0.35s; -webkit-transform: translateX(50px); transform: translateX(50px); } figure.snip0051 .icons a:first-child i { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } figure.snip0051 .icons a:nth-child(2) i { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } figure.snip0051 .icons a:nth-child(3) i { -webkit-transition-delay: 0s; transition-delay: 0s; } figure.snip0051:after { position: absolute; top: 50%; left: 50%; height: 35px; width: 35px; background-color: #000000; content: ''; -webkit-transform: rotate(45deg) translate(-50%, -50%); transform: rotate(45deg) translate(-50%, -50%); -webkit-transform-origin: 0 0; transform-origin: 0 0; } figure.snip0051:hover > img, figure.snip0051.hover > img { opacity: 0.5; filter: blur(5px); -webkit-transform: scale(1.1); transform: scale(1.1); } figure.snip0051:hover i, figure.snip0051.hover i { opacity: 0.8; -webkit-transform: translate(0); transform: translate(0); } figure.snip0051:hover a:first-child i, figure.snip0051.hover a:first-child i { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } figure.snip0051:hover a:nth-child(2) i, figure.snip0051.hover a:nth-child(2) i { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } figure.snip0051:hover a:nth-child(3) i, figure.snip0051.hover a:nth-child(3) i { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } /* Demo purposes only */ body { background-color: #212121; }