Question

I am making a page in which there will be array of images. I need the images to be zoomed when the mouse is hovered and i got it successfully through java script. But the problem is when the image gets enlarged the position of the other images is also getting changed.
I want such that the zoomed image does not change the position of other images like Google Images… that is i want the zoomed image to come over the beside images….any help please…
Thanks in advance

Answer 1

You should use absolute positioning and z-index.

HTML

<div class="container"><img src="#" /></div>
<div class="container"><img src="#" /></div>

CSS

.container {
     position: relative;
}
.container img {
     position: absolute;
     z-index: 0;
}
.container img:hover {
     position: absolute;
     z-index: 1;
}