How to display image in a separate div when hovering mouse with CSS only?

Question

I have a small gallery of thumbnails. When I place the mouse pointer over a thumbnail, I would like the full size image to appear in the div in the upper right corner of the screen. I saw this using only CSS, and I would like to go this route, and not use javascript if possible.

Answer 1

Pure CSS Popups2 , from the same site that Complexspiral brings us. Please note that this example uses actual navigation links as an inverted element. If you do not want this, this can lead to some stickiness with respect to IE versions.

The main way is to embed each image in the link tag with the actual href (otherwise some versions of IE will neglect: hover)

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

and carefully position it using the absolute position. Hide original image

 a img.popup { display: none } 

and then in the process of polling the link, set it so that it appears.

 a:hover img.popup { display: block } 

This is a basic technique, but there will always be great positioning restrictions, since the image tag is inside the link tag. For more details see Link; it uses something a little more complicated than display: no one hides the image.

Answer 2

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

Answer 3

Eric Meyer Pure CSS Popups 2 demo looks like what you want.

Answer 4

Here are some examples:

• CSS Image Gallery
• Multi-browser photo gallery
• CSS-only image gallery: Explained
• CSS Only Image Gallery: Example

This last one is valid when pressed. Just to be complete in behavior.