• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Privacy Policy
  • Contact
bfwr logo

Free Web Resources

For Smart Internet Users

  • Facebook
  • RSS
  • Twitter
  • Technology
  • Inspiration
  • Photography
  • Business
  • Games
  • More
    • SEO
    • Tutorial
      • Coding
      • WordPress
    • Resume/CV
    • Graphics
      • Logo
    • Wallpapers
    • Freebies

How To Create Image Zoom Out Effect with jQuery

March 14, 2010 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

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

  • Best Barbie Font for your next project
    Best Barbie Font for your next project
  • 7 Best Video Chat Websites
    7 Best Video Chat Websites
  • 30 Funny Examples Of Fat Animals
    30 Funny Examples Of Fat Animals
  • 10 Cool And Fresh CSS3 Text Effects Tutorials
    10 Cool And Fresh CSS3 Text Effects Tutorials
  • 10 Best Nursing Resume Templates
    10 Best Nursing Resume Templates
  • 4 Quick Tips To Improve Your Computer/Laptop Speed
    4 Quick Tips To Improve Your Computer/Laptop Speed
  • There’s A New Runner in Town: Run 5 Unblocked
    There’s A New Runner in Town: Run 5 Unblocked
  • 40 Creative Sport Print Ads - Inspired
    40 Creative Sport Print Ads - Inspired
  • 30 Creative Examples Of Electronics Print Ads
    30 Creative Examples Of Electronics Print Ads
  • Broken Screen Prank: Most Realistic Apps for Android
    Broken Screen Prank: Most Realistic Apps for Android

Footer

EMAIL NEWSLETTER

Get the latest in your Inbox for free.

Recent

  • What are Google Workspace Restrictions?
  • Types of Hot Tubs Popular in Grand Rapids
  • The True Cost of Workplace Accidents: 4 Ways They Impact Business
  • The Best SEO Practices For 2023: 7 Tips To Help You Improve Your Google Rankings
  • 3 Tips For Selling Your Fine Art

Copyright © 2023 · Free Web Resources