CODEWITHSUNDEEP
cssxhtmlpopup
user18748
user18748

Reputation: 51

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

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.

Upvotes: 5

Views: 3868

Answers (4)

Gustavo Carreno
Gustavo Carreno

Reputation: 9759

Here are a few examples:

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

Upvotes: 0

Jesse Millikan
Jesse Millikan

Reputation: 3145

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.

Upvotes: 5

Paul Shannon
Paul Shannon

Reputation: 1163

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.

Upvotes: 1

S&#246;ren Kuklau
S&#246;ren Kuklau

Reputation: 19930

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

Upvotes: -1

Related Questions