<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="well text-center"> <h2>Team Hover Effect</h2> </div> </div> </div> <div class="row mb-50"> <div class="col-team col-sm-6 col-lg-3"> <figure class="team-profile"> <img alt="" src="http://paul-themes.com/wp/mario/wp-content/uploads/2017/05/2-370x420-1.jpg"> <figcaption class="team-caption"> <div class="team-meta"> <strong class="team-name">Jack Wilshere</strong> <span class="team-spec">CEO / Founder </span> </div> <ul class="team-social social-list"> <li> <a href="https://www.facebook.com/" target="_blank" class="fa fa-facebook"></a> </li> <li> <a href="https://twitter.com/" target="_blank" class="fa fa-twitter"></a> </li> <li> <a href="https://www.linkedin.com/" target="_blank" class="fa fa-linkedin"></a> </li> <li> <a href="https://www.instagram.com/" target="_blank" class="fa fa-instagram"></a> </li> </ul> </figcaption> </figure> </div> <div class="col-team col-sm-6 col-lg-3"> <figure class="team-profile"> <img alt="" src="http://paul-themes.com/wp/mario/wp-content/uploads/2017/05/2-370x420-1.jpg"> <figcaption class="team-caption"> <div class="team-meta"> <strong class="team-name">Jack Wilshere</strong> <span class="team-spec">CEO / Founder </span> </div> <ul class="team-social social-list"> <li> <a href="https://www.facebook.com/" target="_blank" class="fa fa-facebook"></a> </li> <li> <a href="https://twitter.com/" target="_blank" class="fa fa-twitter"></a> </li> <li> <a href="https://www.linkedin.com/" target="_blank" class="fa fa-linkedin"></a> </li> <li> <a href="https://www.instagram.com/" target="_blank" class="fa fa-instagram"></a> </li> </ul> </figcaption> </figure> </div> <div class="col-team col-sm-6 col-lg-3"> <figure class="team-profile"> <img alt="" src="http://paul-themes.com/wp/mario/wp-content/uploads/2017/05/2-370x420-1.jpg"> <figcaption class="team-caption"> <div class="team-meta"> <strong class="team-name">Jack Wilshere</strong> <span class="team-spec">CEO / Founder </span> </div> <ul class="team-social social-list"> <li> <a href="https://www.facebook.com/" target="_blank" class="fa fa-facebook"></a> </li> <li> <a href="https://twitter.com/" target="_blank" class="fa fa-twitter"></a> </li> <li> <a href="https://www.linkedin.com/" target="_blank" class="fa fa-linkedin"></a> </li> <li> <a href="https://www.instagram.com/" target="_blank" class="fa fa-instagram"></a> </li> </ul> </figcaption> </figure> </div> <div class="col-team col-sm-6 col-lg-3"> <figure class="team-profile"> <img alt="" src="http://paul-themes.com/wp/mario/wp-content/uploads/2017/05/2-370x420-1.jpg"> <figcaption class="team-caption"> <div class="team-meta"> <strong class="team-name">Jack Wilshere</strong> <span class="team-spec">CEO / Founder </span> </div> <ul class="team-social social-list"> <li> <a href="https://www.facebook.com/" target="_blank" class="fa fa-facebook"></a> </li> <li> <a href="https://twitter.com/" target="_blank" class="fa fa-twitter"></a> </li> <li> <a href="https://www.linkedin.com/" target="_blank" class="fa fa-linkedin"></a> </li> <li> <a href="https://www.instagram.com/" target="_blank" class="fa fa-instagram"></a> </li> </ul> </figcaption> </figure> </div> </div> </div>

.mb-50{ margin-bottom: 50px; } .team-profile { position: relative; color: #fff; text-align: center; } .team-profile img { display: block; width: 100%; } .team-caption { opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(66,92,187,.9); -webkit-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; transition: opacity .3s ease-in; } .team-meta { opacity: 0; position: absolute; top: 40%; width: 100%; left: 0; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; } .team-name { letter-spacing: .2em; text-transform: uppercase; font-family: Montserrat,sans-serif; font-size: 1.1em; } .team-spec { display: block; margin-top: .5em; } .team-social { position: absolute; left: 0; width: 100%; bottom: 3em; text-align: center; } .social-list { margin-top: 0; margin-bottom: 0; } .social-list li { display: inline-block; margin: 0 1.1em; } .social-list li a { font-size: 1em; color: #fff; } .team-profile:hover .team-caption { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .team-profile:hover .team-caption { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }