djst wrote:I've tried to do this on my own and I think I got it working the way I wanted
Let me know what you think and if I'm doing anything wrong.
This is the new CSS right?
/* For the thumbnail hover on the themes page */
.thumb span {display:none;}
.thumb a:hover span {
display: block;
position: absolute;
top: 32ex;
left: 70ex;
margin-top: 3ex;
background: #f7f6fb;
padding: 1ex;
width: 150px;
border: gray 1px dashed;
}
Firstly, there's no real point putting your images in <span>s: remove them and apply the rule directly to the images:
.thumb img {display:none;}
.thumb a:hover img {...}
Mozilla-based browsers won't load images that have display:none applied to them initially. This causes a lag when you hover over each link. It's not a problem right now because the images are repeated lower down (and therefore get loaded when the page does) but in the interests of future flexibility, it's probably a good idea to change this.
To do this, make the initial width, height and border-width of the images zero:
.thumb img {width: 0; height: 0; border-width: 0}
Of course, you'll also have to update the :hover rule so that it includes the height:
.thumb a:hover span {
...
width: 150px;
height: 75px;
...
}
This will cause the alt text to be always displayed but you should get rid of it anyway as "Screenshot" doesn't really say anything. The title is a bit superfluous too.
Eric Meyer once made a page about CSS image pop-ups (from which most of this advice is taken):
http://www.meyerweb.com/eric/css/edge/popups/demo2.html