CODEWITHSUNDEEP
jquerycsshtmlthumbnailscenter
user369122
user369122

Reputation: 822

center image on hover thumb css

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

Upvotes: 0

Views: 2677

Answers (2)

SebScoFr
SebScoFr

Reputation: 901

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 ;)

Upvotes: 1

jakee
jakee

Reputation: 18566

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;, then the div should center within it's parent. If you want a more extensive answer do a fiddle of what you already have.

Upvotes: 0

Related Questions