<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="snip1578"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample6.jpg" alt="profile-sample6" /> <figcaption> <h3>Bailey Wonger</h3> <div class="icons"><a href="#"><i class="ion-social-twitter"></i></a> <a href="#"> <i class="ion-social-instagram-outline"></i></a> <a href="#"> <i class="ion-social-github"></i></a> </div> </figcaption> </figure> <figure class="snip1578 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg" alt="profile-sample5" /> <figcaption> <h3>Abraham Pigeon</h3> <div class="icons"><a href="#"><i class="ion-social-twitter"></i></a> <a href="#"> <i class="ion-social-instagram-outline"></i></a> <a href="#"> <i class="ion-social-github"></i></a> </div> </figcaption> </figure> <figure class="snip1578"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample4.jpg" alt="profile-sample4" /> <figcaption> <h3>Hans Down</h3> <div class="icons"><a href="#"><i class="ion-social-twitter"></i></a> <a href="#"> <i class="ion-social-instagram-outline"></i></a> <a href="#"> <i class="ion-social-github"></i></a> </div> </figcaption> </figure>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:200); @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); .snip1578 { font-family: 'Open Sans', Arial, sans-serif; position: relative; display: inline-block; margin: 40px 8px; min-width: 230px; max-width: 315px; width: 100%; color: #000; text-align: left; font-size: 16px; background: #fff; border-radius: 5px; } .snip1578 *, .snip1578:before, .snip1578:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .snip1578 img { max-width: 35%; margin-top: -15px; margin-left: 60%; margin-bottom: 15px; backface-visibility: hidden; vertical-align: top; border-radius: 5px; } .snip1578 figcaption { position: absolute; top: 0; right: 40%; left: 0; bottom: 0; padding: 15px; } .snip1578 h3 { margin: 0; font-size: 1.1em; font-weight: normal; } .snip1578 .icons { font-size: 1.6rem; } .snip1578 .icons a { color: #ccc; } .snip1578 .icons a:hover { color: #2980b9; } /* Demo purposes only */ body { background-color: #212121; text-align: center; }

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