How to to zoom image on mouseover without affecting other image positions?(JQuery)

Question

I want to get the effect similar to google images, where when we mouseover on any image then the image pops and comes in front without affecting the original positions of other images. Also this only happens when the cursor is static not when we are randomly moving it.

I tried to zoom the image but other images are losing their original positions. My code goes as-->

$("img").mouseover(function(){
      $(this).css("cursor","pointer")
      $(this).animate({zoom: '107%'}, 'fast')

   }).mouseout(function(){
      $(this).animate({zoom: '100%'}, 'fast') 

   });

could you provide the markup? Are your images wrapped in their own container? — Fabrizio Calderan, Sep 28 '12 at 12:03
if your okay with jquery plugin try this http://jquery.malsup.com/hoverpulse/ — Krish, Sep 28 '12 at 12:04

score 2 · Accepted Answer · edited May 23 '17 at 11:58

2

In your CSS add Z-index for the image you want to zoom, the image will pop in the z co-ordinate. The idea is to change the Z-index so the image will pop up, while the z-index of other images are lesser than the hovered, so this will not affect the position of other images.

$("img").mouseover(function(){
      $(this).css("z-index","2")
}

Updated: delay example

$(function() {
        var timer;

        $('img').hover(function() {
                if(timer) {
                        clearTimeout(timer);
                        timer = null
                }
                timer = setTimeout(function() {
                        $(this).css("z-index","2"), 2000)
    },
    // mouse out
         clearTimeout(timer);
         $(this).css("z-index","1")
    });
});

Try something like this, check the post here

edited May 23 '17 at 11:58

Community

1
1

answered Sep 28 '12 at 12:06

Karthik Sekar

180
3
12

thanks z index worked... but i need to do one more thing.. i want it to be zoomed only if cursor stays there for more than 2 seconds.. otherwise if i just move around my cursor all the images will keep on zooming. Just the thing that happens in google images, what should i do for that? – Abhinav Sep 29 '12 at 08:22
@Abhinav Check the updated section, someone suggested a jquery plugin as well for this, check the link i shared... – Karthik Sekar Sep 29 '12 at 08:51

score 0 · Answer 2 · answered Sep 28 '12 at 12:02

0

<img style="position:absolute">

change img style property position absolute

answered Sep 28 '12 at 12:02

Man Programmer

5,300
2
21
21

How to to zoom image on mouseover without affecting other image positions?(JQuery)

2 Answers2