CODEWITHSUNDEEP
jqueryhtmlcss
Abhinav
Abhinav

Reputation: 961

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

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') 

   });

Upvotes: 2

Views: 12818

Answers (2)

Karthik Sekar
Karthik Sekar

Reputation: 178

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

Upvotes: 2

Man Programmer
Man Programmer

Reputation: 5356

<img style="position:absolute">

change img style property position absolute

Upvotes: 0

Related Questions