• 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

Share this:

  • Twitter
  • Facebook
  • More
  • Pinterest
  • WhatsApp

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

  • 40 Eye-Catching Examples Of Character Illustrations
    40 Eye-Catching Examples Of Character Illustrations
  • 7 Best Video Chat Websites
    7 Best Video Chat Websites
  • 10 Best Photoshop Sports Templates
    10 Best Photoshop Sports Templates
  • 10 Best Nursing Resume Templates
    10 Best Nursing Resume Templates
  • 30 Examples Of Shadow Photography Taken at Perfect Time
    30 Examples Of Shadow Photography Taken at Perfect Time
  • 20 Beautiful Examples Of Macro Eye Photography
    20 Beautiful Examples Of Macro Eye Photography
  • 40 Creative Sport Print Ads - Inspired
    40 Creative Sport Print Ads - Inspired
  • Best Barbie Font for your next project
    Best Barbie Font for your next project
  • 50 Unbelievable Examples Of Space Wallpapers
    50 Unbelievable Examples Of Space Wallpapers
  • 15 Cool 3D Android Widgets
    15 Cool 3D Android Widgets

Pages

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

EMAIL NEWSLETTER

Get the latest in your Inbox for free.

Copyright © 2023 · Free Web Resources