bluehost Hover Image Zoom With JQuery tutorial jquery css

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.

screen 300x113 Hover Image Zoom With JQuery tutorial jquery css

 

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>

 

Written by Deepanker

Deepanker Verma is a blogger, web developer and WordPress lover.

This article has 1 comments

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>