Question

I’ve got the picture.
When a mouse is over it – the picture becomes 5 times bigger and comes back to normal when the mouse leaves the area.
The bug is that when the picture becomes larger – the text below it goes lower, and I don’t want that to happen.
How do I do that?
Position: absolute is bad for me, as in this case, my formatting looks horrible in different browsers or screens.

Would appreciate if someone of you guys helps me to find another way.

Answer 1

Leo was on the right track but something was missing. You have to “correct” the margins so that they “grow” inwards while the image expands.
you need to position the image at least with position: relative; so z-index gets applied.

Here is a link to a working example
http://jsfiddle.net/utNa2/

edit/ Hm… seems z-index is not needed in this case.