Pure CSS PopUp Thumbnails


Here’s a neat effect that will allow you to display a thumbnail image for a link on hover (similar to the technique used at www.digitalart.org – except ours will be pure CSS).

This technique works in IE6, FireFox and Opera. I haven’t had the opportunity to test it in Safari, though I suspect it will work fine there as well. If someone would like to test it out and let me know, that would be great.

Let’s get started.

The format for our link itself will be:

[html]Sample
sample border=”0″ />
[/html]

First, we want to define a class for our popup links. We’ll call it “imgPop.” There are two important things we need to establish here: relative positioning, and a z-index– so that the link popup will load overtop of the rest of the page content instead of repositioning it. The z-index value is somewhat arbitrary and depending on the rest of your CSS, you may need to increase or lower the value below.

[css]a.imgPop {
position:relative;
z-index:20;
}[/css]

Now let’s define the hover effect for our “imgPop” link container class:

[css]a.imgPop:hover {
display:inline;
z-index:30;
}[/css]

Here, we need to increase the z-index, so that any links we’re hovering over will appear on top of any other nearby “imgPop” links. In order to get the popup to work in IE, we need to set the display property of the link to “inline.”

Now we need to define the initial state for the span that contains our image thumbnail. All we want to do is hide it.

[css]a.imgPop span {
display:none;
}[/css]

Finally, we’ll need to define the hover effect for the span when our mouse is over its container class, “imgPop.” We’ll assign it a block-level display type and position it absolutly within “imgPop,” 1em from the top and 1em from the left. We’ll also specify the height and width of the span (equal to the height and width of our thumbnail).

[css]a.imgPop:hover span {
display:block;
position:absolute;
top:1em;
left:1em;
width:64px;
height:64px;
}[/css]

And there you have it. That’s all there is to it. Users without CSS support will simply see the link text, followed by the thumbnail image. While this may not be the most aesthetically pleasing, it is a rare occourance, and the link and image are both still readily accessible.

You can view the final result here.

Blogging

{ 3 comments… add one }

3 comments on “Pure CSS PopUp Thumbnails

  1. mowgli on said:

    Nice Tutorial…!! appreciates and expects more…!!!!

  2. Sara on said:

    Thanks, after some modifications it’s working with php & sql.
    Have a look! :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

Leave a Comment