This post show how to zoom a image when hover a image. In google image search, when we hover an image this image will simply zoom. This is sometimes necessary for image gallery. This works done by html, css and some jquery lines. Now lets start the techniques to learn.
Final output of zoom a image screenshot
Zoom a image from a gallery when hovering the image
Now start coding to create a zoom image for gallery. For this we need css,html and jquery file. the sample file structure is like.
Create this file
image-zoom.html
image-zoom/ image-zoom.html style.css zoom.js dot-zoom.jpg sha.jpg
Create this file
image-zoom.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="zoom.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Image zoom</h1>
<div id="content">
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="box">
<img src="sha.jpg">
</div>
<div class="clear"></div>
</div>
</body>
</html>
zoom.js
$(document).ready(function(){
$(".box img").hover(function(){
$(this).animate({"width":"200px","top":"-20px","height":"200px","left":"-20px"});
$(this).css({"position":"absolute","z-index":"101"});
},function(){
$(this).stop(100);
$(this).animate({"width":"100%","top":"0px","height":"120px","left":"0px"});
$(this).css({"position":"relative","z-index":"100"});
});
});
style.css
body{
width:600px;
margin:0 auto;
background:url("dot-zoom.jpg");
}
#content{
width:100%;
}
h1{
padding:10px;
color:white;
}
.box{
width:23%;
float:left;
margin:1%;
height:120px;
position:relative;
text-align:center;
}
#content img{
width:100%;
height:120px;
border:2px solid #CD5616;
}
.clear{
clear:both;
}
No comments:
Post a Comment