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

StackOverflow https://stackoverflow.com/questions/108461

  •  01-07-2019
  •  | 
  •  

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.

Was it helpful?

Solution

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.

OTHER TIPS

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.

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

Here are a few examples:

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top