Growing an Image on Hover & Keeping the Image Centered over original position

[nilsw]

How is it possible to maintain the position of an image and “grow” it on hover/mouseover. Every time I try to do this it affects the position of other elements around it. I want to have an effect like on Google+ image gallery:

https://plus.google.com/photos/107671704413122133444/albums/5646888504254171681

[zackw]

your prolly going to have to use a combination of js and absolute positioning

[thomas]

Here’s a quick starting point for you that doesn’t require absolute positioning or JavaScript:

http://jsfiddle.net/qG8Hp/

But, if you want something as complex as your Google+ example, you are going to need some JS (at least for browser compatibility).

EDIT: Updated with CSS transitions: http://jsfiddle.net/qG8Hp/1/
EDIT: One more update (couldn’t resist): http://jsfiddle.net/qG8Hp/2/

[nilsw]

I’m getting this issue where, even when the z-index is increased, the image appears over some elements, but under other elements.

http://jsfiddle.net/5hK3U/

[nilsw]

JS solutions are welcome! Whatever will get the job done :)

[chrisburton]

@nilsw – http://jsfiddle.net/5hK3U/1/

You have to specify a position for z-index to work.

[sahotaT]

it was about positioning the container(li) relative and then on hover making the image position:absolute

[nilsw]

yes! this makes sense now that I know z-index is tied to having the position attribute set.

Thanks Guys!

[nilsw]

Ok, so the previous example worked great with fixed size images, but what happens if all the images are different sizes?

I’ve converted the previous example to use varied image sizes, and JS to adjust for any image size and grow 10% in each direction. BUT, the problem, if the list items don’t have fixed sizes, then the grow effect moves everything around.

How can I keep things in one place with varying image sizes (& fixed height)?

http://jsfiddle.net/5hK3U/29/

[Author]

Posts