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

HTML code

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

    <!-- 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 -->

CSS code

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

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

Similar snippets

Bootstrap snippet bs4 blog post with image hover

bs4 blog post with image hover

View

Bootstrap snippet bs4 simple social network post

bs4 simple social network post

View

Bootstrap snippet bs4 ecommerce products

bs4 ecommerce products

View

About this snippet

Creator: omarhab

Bootstrap version: 3.2.0

Created: Aug 28th 2014, 09:41

Views: 3.7K

Rated 5/5 based on 2 reviews