Posted in Coding  by BBL

How To Create Image Zoom Out Effect with jQuery

  • 3a957627b206d83f5906ccdd29c72cb0
jquery effect How To Create Image Zoom Out Effect with jQuery

JQuery effects have no limit, every day I discover with this library you can do miracles. Today, I’ll try to show you an effect that can be used in photography sites. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out.

First of all , we will create some wrappers for the images that will hide any overflow

<div class="wrap">
<a href="http://www.flickr.com/photos/sylvielorenz/4337557318/">
 <img src="http://lh3.ggpht.com/_kJGjnFglX6M/S5yzLh0EfUI/AAAAAAAAA6I/jz70ym64TbU/4337557318_04c2d152d5.jpg" alt="Picture 1"/>
</a><br /></div>
<div class="wrap">
<a href="http://www.flickr.com/photos/dogwatcher/3598245867/">
<img src="http://lh3.ggpht.com/_kJGjnFglX6M/S5yzMl9IpyI/AAAAAAAAA6Q/df6PVF7gui8/3598245867_b2678ff69b.jpg" alt="Picture 2"/>
 </a>
</div>
<div class="wrap">
 <a href="http://www.flickr.com/photos/marcmaignan/4244098565/">
  <img src="http://lh5.ggpht.com/_kJGjnFglX6M/S5yzNQ7PE8I/AAAAAAAAA6U/4ccF5YJotXw/4244098565_9815828946.jpg" alt="Picture 3"/>
 </a>
</div>
<div class="wrap">
 <a href="http://www.flickr.com/photos/bordignon/3687256762/">
  <img src="http://lh6.ggpht.com/_kJGjnFglX6M/S5yzNw8uH9I/AAAAAAAAA6Y/se-sBCaS-Vg/3687256762_0f60d49b3c.jpg" alt="Picture 4"/>
 </a>
</div>
<div class="wrap">
 <a href="http://www.flickr.com/photos/vranikamandelbrot/3879684755/">
<img src="http://lh4.ggpht.com/_kJGjnFglX6M/S5yzOB4fcvI/AAAAAAAAA6c/E1cluUaHHZc/3879684755_b2414093de.jpg" alt="Picture 5"/>
</a>
</div>
<div class="wrap">
 <a href="http://www.flickr.com/photos/37761626@N02/4088467669/">
<img src="http://lh3.ggpht.com/_kJGjnFglX6M/S5yzML1CRqI/AAAAAAAAA6M/CkYdDe-SG4g/4088467669_df4c1113e5.jpg" alt="Picture 6"/>
</a>
</div>

With some css code , the image will be « zoomed in » initially :

.wrap{
    width:200px;
    height:200px;
    margin:0px;
    overflow:hidden;
    position:relative;
    float:left;
}
.wrap a img{
    border:none;
    position:absolute;
    top:-66.5px;
    left:-150px;
    height:500px;
    opacity: 0.5;
}

The javascript function will make the zoom effect when hovering over the images : 

$(function() {
 $('#container img').hover(
  function(){
   var $this = $(this);
   $this.stop().animate({
     'opacity':'1.0',
     'height':'200px',
     'top':'0px',
     'left':'0px'
    });
  },
  function(){
   var $this = $(this);
   $this.stop().animate({
    'opacity':'0.5',
    'height':'500px',
    'top':'-66.5px',
    'left':'-150px'
    });
  }
 );
});

That’s all.

View demo

About the Author
BBL is the creator and editor of BestFreeWebResources . He is also a Computer Engineer that strongly believes in sharing exciting information with the community. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @bestfreewebres or Google+