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
This might be exactly what you are looking for:
These are not exactly centering a div in the middle of the screen but they look good too ;)