• Skip to main content
  • Skip to primary sidebar
  • Home
  • Technology
  • Inspiration
  • Photography
  • Business
  • Games
  • More
    • SEO
    • Tutorial
      • Coding
      • WordPress
    • Resume/CV
    • Graphics
      • Logo
    • Wallpapers
    • Freebies

Free Web Resources

For Smart Internet Users, Designers and Developers

How To Create Image Zoom Out Effect with jQuery

by Rupesh Kumar

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="https://lh3.ggpht.com/_kJGjnFglX6M/S5yzLh0EfUI/AAAAAAAAA6I/jz70ym64TbU/4337557318_04c2d152d5.jpg" alt="Picture 1"/>
</a>
</div> <div class="wrap"> <a href="http://www.flickr.com/photos/dogwatcher/3598245867/"> <img src="https://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="https://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="https://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="https://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="https://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

What to read next?

  • Amazing And Fresh Photoshop Special Effect Tutorials
  • 11 Free Admin Template For Web Applications
  • 9 Top jQuery Plugins for Dropdown Navigation Menus
  • 5 Best HTML5 Mobile App Frameworks – Worth Calling The Real Gems
  • 6 Beautifully Designed jQuery Mobile Templates Worth Considering
  • Top 7 Best Free Google Maps jQuery Plugins

Filed Under: Coding Tagged With: effect, images, jquery, zoom out

Reader Interactions

Leave a Reply Cancel reply

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

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Search

Trending

  • 30 Funny Examples Of Fat Animals
    30 Funny Examples Of Fat Animals
  • 40 Creative Sport Print Ads - Inspired
    40 Creative Sport Print Ads - Inspired
  • 35 Useful Free Download Puffy Fonts
    35 Useful Free Download Puffy Fonts
  • 30 Examples Of Shadow Photography Taken at Perfect Time
    30 Examples Of Shadow Photography Taken at Perfect Time
  • 7 Best Video Chat Websites
    7 Best Video Chat Websites
  • 30 Creative Examples Of Electronics Print Ads
    30 Creative Examples Of Electronics Print Ads
  • Top 8 Free Shopping Cart jQuery Plugins And Tutorials
    Top 8 Free Shopping Cart jQuery Plugins And Tutorials
  • Best Barbie Font for your next project
    Best Barbie Font for your next project
  • 30 Most Cute And Beautiful Baby Photos
    30 Most Cute And Beautiful Baby Photos
  • The Meaning of Each and Every Airport Signs
    The Meaning of Each and Every Airport Signs

Pages

  • About
  • Privacy Policy
  • Contact
  • Facebook
  • RSS
  • Twitter

EMAIL NEWSLETTER

Get the latest in your Inbox for free.

Copyright © 2022 · Free Web Resources