Making overlay <div> that stays in position after zoom-resize using HTML-CSS only

Answer 1

If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.

The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.

Answer 2

A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.

Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).

Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500

Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.

Answer 3

you mean like here ? (dutch website, see photo browser in the center column at the top)

browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…

Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.