How do I pop up an image in a separate div on mouse-over using CSS only?

Question

I have a small gallery of thumbnails. When I place my mouse pointer over a thumbnail image I'd like to have a full size image pop up in a div in the top right of the screen. I've seen this done using just CSS and I'd like to go down that route rather than use javascript if possible.

Answer 1

Pure CSS Popups2, from the same site that brings us Complexspiral. Note that this example is using actual navigational links as the rolled-over element. If you don't want that, it may cause some stickiness regarding versions of IE.

The basic technique is to stick each image inside a link tag with an actual href (Otherwise some IE versions will neglect :hover)

<a href="#">Text <img class="popup" src="pic.gif" /></a>

and position it cleverly using absolute position. Hide the image initially

a img.popup { display: none }

and then on the link rollover, set it up to appear.

a:hover img.popup { display: block }

That's the basic technique, but there are always going to be major positioning limitations since the image tag dwells inside the link tag. See the link for details; he uses something a little more tricky than display: none to hide the image.

Answer 2

CSS Playground uses pure CSS for this type of thing, one of the demos is surely to help you and as it's all CSS just view source to learn - you probably want to use the :hover pseudo class but there are limitations to it depending on your browser targeting.