I'm working on a website using the Hoverbox image gallery (http://host.sonspring.com/hoverbox/) and I'm trying to include captions for each image preview that appears when hovering over the enlarged image. However, I am facing difficulty as I have only been able to add captions to the thumbnails so far. I remember reading somewhere that using separate tags for the image and caption would solve this issue, but I'm not sure how to proceed. Can anyone offer some assistance?
Here is the code snippet:
<ul class="hoverbox">
<li>
<a href="#"><img src="img/gallery/image1.jpg" alt="description" style="height:75px;
width:59px;"/><img src="img/gallery/image1.jpg" alt="description" class="preview" />
Caption 1</a>
(...)
And here is the corresponding CSS:
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}
.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}
Any help would be greatly appreciated. Thank you,
João