creating popup image viewer in css

Easy and simple way to create popup in css, let’s create popup for an image. Click here for demo.

Css Code

<style type=”text/css”>
.spiderpic{
position: relative;
z-index: 0;
}

.spiderpic:hover{
background-color: transparent;
z-index: 50;
}

.spiderpic span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
}

.spiderpic span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.spiderpic:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

HTML code

<a class=”spiderpic” href=”http://webdesigninfo.wordpress.com”><img src=”http://a.wordpress.com/avatar/settysantu-48.jpg?1180110315&#8243; width=”48px” height=”48px” border=”0″ /><span><img src=”http://www.stumbleupon.com/mainpics/2725502.jpg&#8221; /></span></a>

Browser Support: it works in all browsers.

Download this file

About these ads

33 Responses to creating popup image viewer in css

  1. estellevw says:

    Cool script!
    If you add padding-right: 13px to the thumbnail, the larger image to be visible longer: until the user mouses out of the large image.

    If the big pic shouldn’t be clickable but you want it viewable longer, put everything into an LI, and do li:hover.

    Unfortunately IE6 doesn’t understand :hover pseudoclass on anything other than form elements and links, but javascript can enable IE6 to create an event listener for the LI so it changes class to .hover and li.hover can be equated to li:hover in the CSS

  2. NYCPaul says:

    I’m using pop-up images to enhance text understanding by allowing a hover over a word to display an image that the word describes. I’ve set aside a area on the page to display all the images which will be displayed by hovering linked words in the text.

    My question is: How do I make all pop-up images appear in the same place on the page. What CSS code can determine an exact X-Y coordinate where the image will appear?

  3. Hi Paul,

    Check this this may help u

    background-position
    Example values: 50px 50px, 10% 5%, 2cm 4cm, 2cm 5%, center, etc.
    Specifies the position of a background image for an element.

    background-position-x
    [length | percentage | horziontal-alignment]. Example values: 50px 50px, 10% 5%, 2cm 4cm, 2cm 5%, center, etc.
    Specifies the x-position of a background image for an element.

    background-position-y
    [length | percentage | vertical-alignment]. Example values: 50px 50px, 10% 5%, 2cm 4cm, 2cm 5%, center, etc.
    Specifies the y-position of a background image for an element.

    i hope it solves ur problem

  4. Song says:

    Wow, never thought CSS can go this much!
    I am learning a lot.
    blogging it too.

  5. aku says:

    I was referred to this site by my web design teacher, with whom I have been discussing pop-up techniques. He sent me this link to consider. Thanks for a worthwhile visit! I appreciate the content. There are several really nice tips, techniques, and demos here. I will try to contribute something equally worthwhile. Thank you, santosh and other members of the community for your contributions and efforts. This is a SUPER use of css and it provokes ideas.

  6. Whoever says:

    That’s great and all, but how do I make a regular pop-up with text of my own?

  7. Dragonlord TZA says:

    Do i just make a new .css file and put this code in?
    or if not, where then?

  8. dear Dragonlord TZA,
    put this code in the same file(html).

  9. ZooropaGal says:

    Fabulous…any way to modify this for a Flash button onrollover event?

  10. foxytheold says:

    i know i’m stupid (and old) but could someone tell me how i use this code..

  11. Prem krishnan b v says:

    Its really cool……………….
    thank you….

  12. Hey did you get an answer?? I don’t know how to use this info either……..HELP! ! !

  13. Raye says:

    Hi,

    Do you know how to create a popup window using only css without using javascript?

    Thanks

  14. Hi Raye,
    Up to my knowledge it is not possible to create pop-up window using only css we need to use javascript.

  15. Bob Cobb says:

    Is there a way to make it so that when the mouse leaves the thumbnail, the pop-up image disappears even if the mouse is over the popped-up image?

    I know how to make this less likely by moving the pop-up image farther away from the thumbnail, but I was wondering if there’s a way to make it so that even if the mouse is over the pop-up image, it disappears no matter what when the mouse leaves the popped-up image?

    If you don’t know what I mean, you can test this by moving the mouse fast to test this.

    Thanks SO MUCH for your help! I’m designing a site right now, so any fast answer you can give will be very much appreciated.

  16. Hi Bob,
    Can u explain more clearly bcoz i didnt get wht u want?

  17. Ian says:

    Hi – I am just learning Dreamweaver and want to do exactly what you are doing when you hover over the words here & demo in your intro. That is to say you get a snapshot open with a pointer to the word you hover over.

    Can someone please explain how I can achieve this effect.

    Thanks very much.

  18. Brian In NY says:

    Hi,

    I have tried this, downloading and inserting your code, both html and css.

    I have modified the directory references to point to my own PIC folder, in which I have placed your two Spiderman images (small and big), and yet the images fail to appear in execution.

    This is discouraging.

  19. Brian In NY says:

    CORRECTION OF ABOVE POST . .

    I discovered the cut-and-pasted code somehow ended up with quote marks that weren’t understood. The small picture now show, with no enlargement with the roll-over. I will be looking further.

  20. Brian In NY says:

    .. I have now downloaded all the code via the utility provided, and it works fine. Thanks!

  21. Vaninja says:

    Wow! This is what i looking for. Cool!!
    I was visiting ebay’s “snapshot view” before and wondering how they made it (I’m a newbie in webdesign).
    This code is really useful.
    Thanks!!

  22. Yeuclid says:

    Neat code, but doesn’t work for me in IE6.

    Any suggestions?

    Works in Firefox

  23. hi Yeuclid,
    can u plz provide me link so that i can help u!

  24. Potski says:

    Great script, really useful and just what I was looking for. Thank you!

  25. Annie says:

    I did a pop-up of an image when the mouse hovers over text, but the enlarged image is pushing all other text out of the way even though I set the z-index of the image higher than the one of the text. Please help!

  26. hi annie,
    can u show me demo file.. so that i can help you

  27. Kelly says:

    I have implemented this on my site – it works great except for in Explorer. In Explorer, the images don’t switch out. I do not have a link on my items as the example shows – they are only meant to show images, not take the viewer anywhere on the click. Is this why? Does anyone know a work-around for this glitch? Thanks!

  28. Jonathan says:

    thank you guys, been looking for this all over the net. Am an amateur advance photographer and a complete newbie to css and javascript. Learning to build personal website to put up video and photos for family and friends to view. Please keep up the good work.
    -Jonathan

  29. Kelly says:

    Ok – I figured it out – did a little google search for “css hover fix ie6″ and found a guy with a solution. You add a little code to the css (you can search csshover.htc) to find him – sorry I didn’t save it!

  30. Natbob says:

    This is a good script. I found this script while trying to find a replacement for a script that is currently on my site, it does the same thing. In the process of testing that script, I found that if you want the image to be a link it doesn’t work in IE. However it does work if you click on the padding (the span tag) around the image. It works fine in FF but for some reason the img tag voids the link. I have tried making a link inside of a link, however browsers don’t like that too much. If anyone has a solution that would be great!

  31. matt says:

    great script! I’m actually using it for a comic book site so your spider-man demo was great!

    I notice the positioning in firefox is different than IE with the pop up window. Any ideas?

    http://www.bringbackwendell.com/popup.html

  32. han says:

    Awesome script.

    It works fine on a single html file, but it will not work if you put the CSS code in a separate file, say stylesheet.css, and link it from your html file. Any ideas?

    Another question, how effecient is this script? Are ALL the pics in the SPAN code loaded everytime the page is called? What if you just want to load the images you hover only?

  33. sonal says:

    Do you know how to create a popup window using only css without using javascript?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: