ad

Hover Image Zoom Effect With JQuery

screen

Zoom effect is very useful while creating photo galleries. In this, when someone hover the image, it increases in size. In other words, zoom image on hover. This can be done with jQuery.

In this code I am using 5 images. Zoom in effect triggered when the mouse is hover. Change the css properties for changing the height and width of images on normal and zoom condition.

 

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>JQuery Zoom Hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cont_left = $("#container").position().left;
$("a img").hover(function() {
// hover in
$(this).parent().parent().css("z-index", 1);
$(this).animate({
height: "250",
width: "250",
left: "-=50",
top: "-=50"
}, "fast");
}, function() {
// hover out
$(this).parent().parent().css("z-index", 0);
$(this).animate({
height: "150",
width: "150",
left: "+=50",
top: "+=50"
}, "fast");
});

$(".img").each(function(index) {
var left = (index * 160) + cont_left;
$(this).css("left", left + "px");
});
});
</script>
<style type="text/css">
#container {
text-align: center;
position: absolute;
left: 260px;
margin-top: 150px;
width: 790px;
}
.img {
position: fixed;
z-index: 0;
}
.end {
margin-right: 0;
}
.clear {
clear: both;
}
.img a img {
position: relative;
border: 0 solid #fff;
}
</style>
</head>
<body>
<div id="container">
<div class="img"><a href="#"><img src="img/1.jpg"/></a></div>
<div class="img"><a href="#"><img src="img/2.jpg"/></a></div>
<div class="img"><a href="#"><img src="img/3.jpg"/></a></div>
<div class="img"><a href="#"><img src="img/4.jpg"/></a></div>
<div class="img end"><a href="#"><img src="img/5.jpg"/></a></div>
<div class="clear"></div>
</div>
</body>
</html>

 

Tags: | |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

1 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker