Image Zoom Effect with jQuery ~ Web Speaks

Image Zoom Effect with jQuery

Here is a simple script showing image zoom effect on mouseover. The zoom effect is simply a trick to animate the image to a larger size. But it needs to be controlled by tricky CSS implementation. So CSS+jQuery are enough to beautify your web page with this simple zoom effect. See how does it look...

Live Demo Download Script

HTML Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webspeaks.in</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
</head>

<body>

<div id="main">
 <ul class="gallery">
  <li><img src="1.jpg" /> </li>
  <li><img src="2.jpg" /> </li>
  <li><img src="3.jpg" /> </li>
  <li><img src="4.jpg" /> </li>
 </ul>
</div>

</body>
</html>

jQuery Code

<script type="text/javascript">
$(function()
{
 $('ul.gallery li img').hover(function()
 {
  $(this).css({'z-index' : '10'});
  $(this).animate({
    marginTop: '-110px', 
    marginLeft: '-110px', 
    top: '50%',
    left: '50%', 
    width: '174px', 
    height: '174px',
    padding: '10px' 
   }, 500); 
 } , function() {
  $(this).css({'z-index' : '0'});
  $(this).animate({
    marginTop: '0', 
    marginLeft: '0',
    top: '0', 
    left: '0', 
    width: '70px', 
    height: '70px', 
    padding: '5px'
   }, 400);
 });
});
</script>

CSS Code

body{ background-color:#CCC;}
#main{top:50%; left:50%; height:300px; width:910px;}
ul.gallery{list-style: none; margin:200px 100px;}
ul.gallery li{float: left; position: relative; width: 110px; height: 110px;}
ul.gallery li img{height:70px; width:70px; padding:5px; border: 1px solid #ddd; background: #f0f0f0; position: absolute; cursor:pointer;}

Image Zoom Effect with jQuery

HTML Markup

jQuery Code

CSS Code

1 comments: