center image on hover thumb css

Question

I would like to let images popup in the center of the screen, when I hover over a thumb. I have multiple thumbs and I all want them to display a div (which includes text and an image) right in the center of the screen, independent from the screen resolution etc. etc.

<a href="#thumb"><img src="img/thump_5.png" width="150px" border="0" /><span><b>some info and image 1</b><br><img src="img/5.png" width="510" height="335" /></span></a>
<br>
<a href="#thumb"><img src="img/thump_2.png" width="150px" border="0" /><span><b>some info and image 2</b><br><img src="img/2.png" width="510" height="335" /></span></a>
<br>
<a href="#thumb"><img src="img/thump_3.png" width="150px" border="0" /><span><b>some info and image 3</b><br><img src="img/3.png" width="510" height="335" /></span></a> 
<br>
<a href="#thumb"><img src="img/thump_4.png" width="150px" border="0" /><span><b>some info and image 4</b><br><img src="img/4.png" width="510" height="335" /></span></a>
<br>
<a href="#thumb"><img src="img/thump_1.png" width="150px" border="0" /><span><b>some info and image 5</b><br><img src="img/1.png" width="510" height="335" /></span></a>

I bumped into this question: Using jQuery to center a DIV on the screen

But I have no clue how to implement this in my html code. Can anyone help me out with the css / jquery to get it working. Regards,

Matthijs

Answer 1

This might be exactly what you are looking for:

• http://jmar.github.com/jquery-hoverZoom/

These are not exactly centering a div in the middle of the screen but they look good too ;)

• http://cssglobe.com/lab/tooltip/02/
• http://james.padolsey.com/demos/imgPreview/full/
• http://home.comcast.net/~littlemoe85/thumbhover/index.html

Answer 2

Without any code it is hard to give you an allaround answer, but in css terms when you have define a div's width and height attributes to some concrete values (not auto ) and then do position:relative; margin: auto; position:relative; margin: auto; , then the div should center within it's parent. If you want a more extensive answer do a fiddle of what you already have.