"Hover Div"
Bootstrap 3.1.0 Snippet by Mehedi-BN

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="row"> <div class="row"> <!-- The Team --> <div class="home-doctors clearfix"> <!-- entry1 --> <div class="col-lg-4 col-md-4 col-sm-6 text-center doc-item"> <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp"> <ul class="list-inline social-lists animate pr_li"> <li> <a href="POVERTY_ALLEVIATION.html"> <img src="http://likebangla.tk/demo/images/Untitled-1.png" /></a> </li> </br> <h2 style="color:#fff;">POVERTY ALLEVIATION</h2> </ul> <figure> <img width="670" height="500" src="http://likebangla.tk/demo/images/Image-01.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> </figure> </div> </div> <!-- entry2 --> <div class="col-lg-4 col-md-4 col-sm-6 text-center doc-item"> <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp"> <ul class="list-inline social-lists animate pr_li"> <li> <a href="EDUCATION.html"> <img src="http://likebangla.tk/demo/images/edu.png" /></a> </li> </br> <h2 style="color:#fff;">EDUCATION</h2> </ul> <figure> <img width="670" height="500" src="http://likebangla.tk/demo/images/Image-02.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> </figure> </div> </div> <!-- entry3 --> <div class="col-lg-4 col-md-4 col-sm-6 text-center doc-item"> <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp"> <ul class="list-inline social-lists animate pr_li"> <li> <a href="#"> <img src="http://likebangla.tk/demo/images/tat.png" /></a> </li> </br> <h2 style="color:#fff;">GENDER/</br>WOMEN/CHILDEREN</h2> </ul> <figure> <img width="670" height="500" src="http://likebangla.tk/demo/images/Image-03.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> </figure> </div> </div> <!-- entry4 --> <div class="col-lg-4 col-md-4 col-sm-6 text-center doc-item"> <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp"> <ul class="list-inline social-lists animate pr_li"> <li> <a href="HEALTH.html"> <img src="http://likebangla.tk/demo/images/love.png" /></a> </li> </br> <h2 style="color:#fff;">HEALTH</h2> </ul> <figure> <img width="670" height="500" src="http://likebangla.tk/demo/images/Image-06.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> </figure> </div> </div> <!-- // --> <!-- entry5 --> <div class="col-lg-4 col-md-4 col-sm-6 text-center doc-item"> <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp"> <ul class="list-inline social-lists animate pr_li"> <li> <a href="#"> <img src="http://likebangla.tk/demo/images/man.png" /></a> </li> </br> <h2 style="color:#fff;">DISABLITY</h2> </ul> <figure> <img width="670" height="500" src="http://likebangla.tk/demo/images/Image-05.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> </figure> </div> </div> <!-- // --> <!-- entry6 --> <div class="col-lg-4 col-md-4 col-sm-6 text-center doc-item fel"> <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp"> <ul class="list-inline social-lists animate pr_li"> <li> <a href="ENVIRONMENT.html"> <img src="http://likebangla.tk/demo/images/bird.png" /></a> </li> </br> <h2 style="color:#fff;">ENVIRONMENT</h2> </ul> <figure> <img width="670" height="500" src="http://likebangla.tk/demo/images/Image-04.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> </figure> </div> </div> <!-- // --> <div class="visible-sm clearfix margin-gap"></div> </div> <!-- //The Team --> </div> </div> </div> </div>
/* edirectory*/ .animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /*=============== Home-team ===============*/ .home-doctors { text-align: center; /* padding: 70px 0 80px;*/ background: #f0f5f6; } .home-doctors h2 { font-weight: normal; } .home-doctors .common-doctor { background-color: #fff; } .home-doctors .common-doctor figure { overflow: hidden; width: 100%; height: 253px; } .home-doctors img { height: 100%; margin-top: 10%; width: 100%; /*width: 100%; height: auto; margin-top: -6em;*/ } .home-doctors .common-doctor h5 { margin: 0 0 7px; font-size: 18px; font-weight: 700; color: #3a3c41; } .home-doctors .common-doctor .for-border { margin-bottom: 20px; } .home-doctors .common-doctor .text-content { padding: 19px 14px 13px; } .home-doctors.doctors-var-two { text-align: left; background-color: #fff; } .home-doctors.doctors-var-two .slogan-section { text-align: left; } .home-doctors.doctors-var-two .common-doctor { background-color: transparent; } .home-doctors.doctors-var-two .common-doctor .for-border { display: none; } .home-doctors.doctors-var-two .common-doctor .text-content { padding: 20px 0 20px; } .home-doctors.doctors-var-two .text-center { text-align: left; } .slogan-section { margin-bottom: 50px; text-align: center; } .home-doctors .common-doctor .for-border { margin-bottom: 20px; } .for-border { height: 11px; width: 100%; border: none; } .home-doctors .common-doctor h5 small { color: #008fd5; font-weight: bold; font-size: 0.8em; font-style: italic; } .home-doctors .common-doctor ul{ position: absolute; top: 50%; left: 0; width: 100%; margin-top: -28px; text-align: center; margin-top: 10em; opacity: 0; z-index: 1; } .home-doctors .common-doctor li a { } .doc-img{ /* Webkit for Chrome and Safari */ -webkit-transform: scale(1, 1); // This is the scale for the normal size of the image. -webkit-transition-duration: 500ms; -webkit-transition-timing-function: ease-out; /* Webkit for Mozila Firefox */ -moz-transform: scale(1, 1); -moz-transition-duration: 500ms; -moz-transition-timing-function: ease-out; /* Webkit for IE( Version: 11, 10 ) */ -ms-transform: scale(1, 1); -ms-transition-duration: 500ms; -ms-transition-timing-function: ease-out; } .doc-item:hover .doc-img{ opacity: 0.7; } .doc-item:hover .social-lists{ margin-top: -2em; opacity: 1; } .pr_li > li { display: inline-block; padding-left: 5px; padding-right: 5px; margin-top: -9%; }

Questions / Comments: