How do I pop up an image in a separate div on the mouseover of a div using only CSS?

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

You probably ought to go with Javascript if browser compatibility is important.

Answer 2

Eric Meyer's Pure CSS Popups 2 demo sounds similar enough to what you want.

Answer 3

Here's one example:
CSS Imahe gallery

Here's another:
Cross Browser Multi-Page Photograph Gallery

And another one...
A CSS-only Image Gallery: Explained
A CSS-only Image Gallery: Example

This last one acts upon click. Just to be complete in behaviours.

Cheers, Gus

Answer 4

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 5

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.

Answer 6

Hi Gustavo, thanks for linking.

I have also created a blog post to explain the method I used and some of the pitfalls of this method here.

Hope your readers find this helpful.

Ciao, Jayx