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

  • 10 Amazing JQuery Tutorials For Your Next Project
  • 7 Benignant Code Editors to ease the lives of designers and developers
  • 10 CSS Tools & Generators
  • 10 Free Tools to Support Dynamic Web Development
  • 42 Incredible Examples Of Architecture Photography
  • 30 Useful Jquery Plugins For Developer & Designer

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 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
  • 20 Beautiful Examples Of Macro Eye Photography
    20 Beautiful Examples Of Macro Eye Photography
  • 30 Fresh And Imaginative Typography Design
    30 Fresh And Imaginative Typography Design
  • 10 Best Nursing Resume Templates
    10 Best Nursing Resume Templates
  • Creative Collection Of Hotel Logo Design
    Creative Collection Of Hotel Logo Design
  • 30 Impressive Healthcare Print Ads
    30 Impressive Healthcare Print Ads
  • 30 Creative Examples Of Electronics Print Ads
    30 Creative Examples Of Electronics Print Ads
  • Best Barbie Font for your next project
    Best Barbie Font for your next project
  • 30 Print Ads That Will Make You Smile
    30 Print Ads That Will Make You Smile

Pages

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

EMAIL NEWSLETTER

Get the latest in your Inbox for free.

Copyright © 2021 · Free Web Resources