"product hover #hovereffect #hover #zoom #zoomeffect #effect"
Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY

Post to Facebook Tweet this

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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">
<!-- Simple Zoom Effects -->
<div class="row">
<div class="col-md-12 text-center"><h3>Simple Zoom Effects</h3></div>
<div class="col-md-4">
<div class="product-div1">
<div class="img-div1">
<img src="http://placehold.it/350x150" class="img-responsive transition">
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-div1">
<div class="img-div1">
<img src="http://placehold.it/350x150" class="img-responsive transition">
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-div1">
<div class="img-div1">
<img src="http://placehold.it/350x150" class="img-responsive transition">
</div>
</div>
</div>
</div>
<!-- Text View -->
<div class="row">
<div class="col-md-12 text-center"><h3>Text View</h3></div>
<div class="col-md-4">
<div class="product-div2">
<img src="http://placehold.it/350x150" class="img-responsive transition">
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
h3{
margin-bottom:30px;
margin-top:30px;
}
/* --------- Global ----------*/
.transition{
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.img-responsive{
width:100%;
}
/* --------- Simple Zoom Effects ----------*/
.product-div1{
position:relative;
overflow:hidden;
}
.product-div1:hover img{
transform: scale(1.1);
}
img{
transform: scale(1);
}
/* --------- Text View ----------*/
.product-div2{
position:relative;
overflow:hidden;
}
.product-div2:hover .text-view{
top: 50%;
opacity:1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: