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" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="" type="text/javascript"></script>


<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>


jQuery Code

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

CSS Code

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

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.


One thought on “Image Zoom Effect with jQuery

  1. Regarding the web site proprietor, could I question how would you contend with useless posts?

    We’re wanting to pay up just for tips and advice to handle it!

    Look at my web site: Workout Finishers Review ()

Comments are closed.