Image Hover Box

[eknowlton]

Hey, I was wondering how I could get a box to pop-up over a image on mouse over, but for the box to be centered over the image.

Here's the concept...
http://g.imagehost.org/view/0670/idea

Any help would be great... thanks!

[Nile]

I don't know if this is the best, but try it:


<style type="text/css">
div.previewer {
height: 120px;
width: 120px;
float: left;
padding: 10px;
background-color: #84797D;
}
div.previewer img {
height: 100%;
}
div.previewer p.info {
display: none;
width: 100%;
background-color: black;
opacity: .5;
color: #FFF;
font-family: arial;
font-size: 11px;
margin: 0;
text-align: center;
}
div.previewer:hover > p.info {
display: block;
}
div.previewer:hover > img {
}
div.previewer:hover {
height: 150px;
width: 150px;
}
</style>
<div class="previewer">
<p class="info">My dog...</p>
<img src="http://puppywar.com/images/cards/31309.jpg" />
<p class="info">Yoshi!</p>
</div><div class="previewer">
<p class="info">My dog...</p>
<img src="http://puppywar.com/images/cards/31309.jpg" />
<p class="info">Yoshi!</p>
</div>


(BTW: I did it with CSS)

Or you can try:
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

[eknowlton]

Thanks for the reply.

The page you provided isn't quite what I would like.
I want the image to actually box to acutally pop-up over the image in a different layer.

But I think the link you provided to the Pop-Up image viewer is real close to what I want, and will give me a good idea of what I need to do.

Thanks, again.

Edit: Ya it was exactly what I was looking for.

[Nile]

Ok! Glad to help you!