"Zoome Image On Mouse Over"
Bootstrap 4.1.1 Snippet by aungnainghtay

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h2 class="text-center">Zoom Image On Mouse Over</h2>
<div class="row">
<div class="col-sm-4">
<div class="item"><img src="https://images.pexels.com/photos/247204/pexels-photo-247204.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="img-thumbnail"></div>
</div>
<div class="col-sm-4">
<div class="item"><img src="https://images.pexels.com/photos/247287/pexels-photo-247287.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-thumbnail"></div>
</div>
<div class="col-sm-4">
<div class="item"><img src="https://images.pexels.com/photos/458766/pexels-photo-458766.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-thumbnail"></div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.item{
left: 0;
top: 0;
position: relative;
overflow: hidden;
margin-top:50px;
}
.item img{
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
}
.item img:hover{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.img-thumbnail{
border:0px;
border-radius:0px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Fresh Bootstrap Table
Image Crop jQuery
Animated Vertical Bootstrap Carousel on Mouse scroll and Swipe
Image Checkbox

Questions / Comments: