Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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.
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)
and position it cleverly using absolute position. Hide the image initially
and then on the link rollover, set it up to appear.
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.