dsmartdesignHello! I have been tearing through forums and google about how to incorporate a rollover image gallery like this one into a wordpress site, but have found only dead-ends. I want an image gallery with thumbnails, and while hovering over the thumbnails, the image appears as a larger image right above the thumbnails. It seems pretty simple to accomplish on a pure HTML site, but have found nothing about how to incorporate into wordpress. Anyone else looking for this solution? Can anyone help?
This pure css/html code looks just like what I need, but I can't figure out how to use it on my wordpress site. Thanks!
Html:
<img src="images/02_1s.jpg" alt="gallery thumbnail" />
<span><img src="images/02_1m.jpg" alt="gallery image" /></span>
Css:
ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none;
}
ul#gallery{
margin:2em 0;
}
ul#gallery li{
float:left;
display:inline;
margin-right:5px;
}
ul#gallery a{
float:left;
display:inline;
position:relative;
}
ul#gallery a:hover{
background:none;
z-index:100;
}
ul#gallery a span{
display:none;
}
ul#gallery a:hover span{
float:left;
display:block;
cursor:pointer;
}
ul#gallery a:hover em{
display:none;
}
ul#gallery a img{
border:1px solid #999;
padding:2px;
background:#fff;
}
ul#gallery a:hover img{
border:1px solid #000;
}
