Triggering a 'further information' div on mouseover (with overlaps)

This is 开发者_高级运维the effect I would like to achieve when the mouse cursor is over an image:

Here is my approach so far:

<div id="moviethumb2" class="moviethumb">
    <a onmouseover="javascript:mouseOverThumb(2)" href="movie.php?id=38055">
           <img src="img2.jpg">
    </a>
</div>
<div id="moviethumb3" class="moviethumb">                   
    <a onmouseover="javascript:mouseOverThumb(3)" href="movie.php?id=605">
           <img src="img3.jpg">
    </a>
</div>

But I have not been able to come up with a very simple approach. z-index I've tried to use.

My question to you is, what is the simplest way of achieving the above effect using css, jquery/javascript. I would appreciate pointers in the right direction so I don't overcomplicate this problem.

Thanks

A classic, but great example of exactly what you are looking for.

Tutorial http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

Demo http://www.sohtanaka.com/web-design/examples/image-zoom/

Probably the easiest way is just using jQuery, as Loktar suggested.

If you really want to do it yourself, however: Add a new div for the popup with a specific width, position:absolute and display:none. Now, when hovering over one of the thumbs, use javascript to set display to 'block' and the position to the thumb's position minus the border width/height. (You could get the thumb's position by giving it an id similar to the number you pass with the mouseOverThumb, then doing getElementById and reading the top and left properties). Use onMouseOut to set the popup's display to 'none' again.

Now, instead of messing around with z-index, just put the relevant thumb and additional info into the popup using javascript.

That's the simplest way I can think of right now.