Zoom Social Icon Hover Animation

This bootstrap snippet called "Zoom Social Icon Hover Animation" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

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

					    <div class="container bootstrap snippet">
					        <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="#"><i class="fa fa-skype"></i></a></li>
												<li><a href="#"><i class="fa fa-skype"></i></a></li>
												<li><a href="#"><i class="fa fa-twitter"></i></a></li>
												<li><a href="#"><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="#"><i class="fa fa-skype"></i></a></li>
												<li><a href="#"><i class="fa fa-skype"></i></a></li>
												<li><a href="#"><i class="fa fa-twitter"></i></a></li>
												<li><a href="#"><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="#"><i class="fa fa-skype"></i></a></li>
												<li><a href="#"><i class="fa fa-skype"></i></a></li>
												<li><a href="#"><i class="fa fa-twitter"></i></a></li>
												<li><a href="#"><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="#"><i class="fa fa-skype"></i></a></li>
												<li><a href="#"><i class="fa fa-skype"></i></a></li>
												<li><a href="#"><i class="fa fa-twitter"></i></a></li>
												<li><a href="#"><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 -->

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
				                
body{margin-top:20px;}				              




.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 ===============*/
                                    

Information about this bootstrap snippet

Creator: omarhab

Bootstrap version: 3.2.0

Created: Aug 28th 2014, 09:41

Views: 3.5K

Rated 5/5 based on 1 reviews