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/cs...-image-viewer/
http://www.dynamicdrive.com/style/cs...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!