"Zoom Social Icon Hover Animation"
Bootstrap 3.2.0 Snippet by SnippOmarNow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<!-- 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="#"><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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Images not responsive. On a sideways phone you can't see the whole picture

Rian () - 8 years ago - Reply 0


Awesome Style

Pratik Chauhan () - 9 years ago - Reply 0