Bootstrap Zoom Social Icon Hover Animation


	    <!-- The Team -->
					<div class="home-doctors  clearfix">

					    <div class="container">
					        <div class="row">
				                <div class="col-lg-12 col-md-12 col-sm-12 ">
				                    <div class="slogan-section animated fadeInUp clearfix ae-animation-fadeInUp">
				                        <h2>Meet our <span>Dental Specialists</span></h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>                    </div>
				                </div>
					    	</div>


					        
					        <div class="row">



<!-- entry1 -->
						            <div class="col-lg-3 col-md-3 col-sm-6  text-center doc-item">
				                        <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp">

					                        <ul class="list-inline social-lists animate">
												<li><a href="javascript:;"><i class="fa fa-skype"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-skype"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>
											</ul>

	                                        <figure>
								                    <img width="670" height="500" src="http://somesweetphoto.smugmug.com/photos/i-VHdG3sd/0/O/i-VHdG3sd.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> 
								            </figure>

						                    <div class="text-content">
						                        <h5>Dr. Jeremy</h5>
						                        <!-- <div class="for-border"></div> -->
						                        <h5><small>Dentist Title</small></h5>
						                    </div>
						                </div>
						            </div>





<!-- entry2 -->
						            <div class="col-lg-3 col-md-3 col-sm-6  text-center doc-item">
				                        <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp">

					                        <ul class="list-inline social-lists animate">
												<li><a href="javascript:;"><i class="fa fa-skype"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-skype"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>
											</ul>

	                                        <figure>
								                    <img width="670" height="500" src="http://somesweetphoto.smugmug.com/photos/i-VHdG3sd/0/O/i-VHdG3sd.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> 
								            </figure>

						                    <div class="text-content">
						                        <h5>Dr. Jeremy</h5>
						                        <!-- <div class="for-border"></div> -->
						                        <h5><small>Dentist Title</small></h5>
						                    </div>
						                </div>
						            </div>




<!-- entry3 -->
						            <div class="col-lg-3 col-md-3 col-sm-6  text-center doc-item">
				                        <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp">

					                        <ul class="list-inline social-lists animate">
												<li><a href="javascript:;"><i class="fa fa-skype"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-skype"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>
											</ul>

	                                        <figure>
								                    <img width="670" height="500" src="http://somesweetphoto.smugmug.com/photos/i-VHdG3sd/0/O/i-VHdG3sd.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> 
								            </figure>

						                    <div class="text-content">
						                        <h5>Dr. Jeremy</h5>
						                        <!-- <div class="for-border"></div> -->
						                        <h5><small>Dentist Title</small></h5>
						                    </div>
						                </div>
						            </div>





<!-- entry4 -->
						            <div class="col-lg-3 col-md-3 col-sm-6  text-center doc-item">
				                        <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp">

					                        <ul class="list-inline social-lists animate">
												<li><a href="javascript:;"><i class="fa fa-skype"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-skype"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>
												<li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>
											</ul>

	                                        <figure>
								                    <img width="670" height="500" src="http://somesweetphoto.smugmug.com/photos/i-VHdG3sd/0/O/i-VHdG3sd.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> 
								            </figure>

						                    <div class="text-content">
						                        <h5>Dr. Jeremy</h5>
						                        <!-- <div class="for-border"></div> -->
						                        <h5><small>Dentist Title</small></h5>
						                    </div>
						                </div>
						            </div>
<!-- // -->




					                                            <div class="visible-sm clearfix margin-gap"></div>
					                                </div>

					    </div>

					</div>
					<!-- //The Team -->
	<script type="text/javascript">
	
	</script>

        @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);



.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: 196px;
}

.home-doctors img {
	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%;
	background: transparent url(http://omarhabash.com/nova/wp-content/uploads/2014/08/feature-border.png) center center no-repeat;
	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 {
	background: #008fd5;
	color: white;
	padding: 0.75em;
	border: 5px solid rgba(255, 255, 255, 0.33);
}


.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{
	 /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
 
  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.2, 1.2);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;
 
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.20, 1.20);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;

  opacity: 0.7;
}

.doc-item:hover .social-lists{
	margin-top: -2em;
	opacity: 1;
}


/*=============== //Home-team ===============*/