August 17

CSS3 thumbnail effects Tutorial

CSS3 thumbnail effects

I was first introduced to this CSS trick when reading Andy Clarke’s “Transcending CSS” back in 2007. I always thought it was a wonderful way of displaying thumbnails when a user hovers over the image.

In a nutshell, the user hovers over the thumbnail of choice and it immediately doubles in size and hovers over the other thumbnails near it. Simple enough.

But now, with CSS3 we can do smooth transitions that we weren’t capable of doing back then without using Flash or javascript and the Jquery library (although, Jquery had only been around since 2006).

Actually, there’s a multitude of effects we can add to the transitioning graphic upon hovering over it:

1. opacity
2. border radius
3. rotate
4. animation (infinite possibilities here)

In this tutorial, I’m going to walk you through how to make a subtle, simple, yet very engaging thumbnail rollover for your website.

HTML:

The html as always, should be pretty basic. All the thumbnail images are wrapped in <div> tags.

I start off by wrapping my thumbnails in the html5 <figure> tag. I usually use colorbox as a lightbox gallery, but for now, we’ll just hash the link.
[code type=html]

[/code]

CSS:

First, you define the width & height of your <div> container – this should be the size of the thumbnail in its small state. I float my container to the left and set its position to relative.

Second, I set the width and height (50px) of my thumbnail in its original state and absolute position it with top and left margin set to 0px. Next I add the transition effect, an opacity of 0.8 and a border. Btw: Here is a link to the specifics of the transition values: http://www.w3.org/TR/css3-transitions/

Last, I add the hover state of the thumbnail by setting its width and height to double the size of its original state (width: 100px height: 100px). Then I change the opacity to 1 (i.e. no transparency), and a border radius of 5px. Next, I change the top and left margins to -15px and -25px so that the image is perfectly centered above the original thumbnail. This will change depending on your thumbnail’s original size. Last, I make the z-index 100 in order for the image to float above all images surrounding it.
[code type=css]
figure div {
width: 50px;
height: 50px;
float: left;
position: relative;
margin: 10px 0 10px 10px;
}
figure div {
width: 50px;
height: 50px;
float: left;
position: relative;
margin: 10px 0 10px 10px;
}
.thumbnail:hover {
width: 100px;
height: 100px;
border: 5px solid #CCC;
border-radius: 10px;
-moz-radius: 10px;
-webkit-radius: 10px;
opacity: 1;
position: absolute;
top: -15px;
left: -25px;
z-index: 100;
}
[/code]

IE:

Although transitions don’t work in IE, the fallback just takes us back to pre-css3. Not a big deal.

I do use CSS conditionals for IE7 because the thumbnail doesn’t pop out like how it’s suppose to, so instead I set the top and left margins to 0px. No big deal.
[code type=css]
.ie7 .thumbnail:hover {
width: 50px;
height: 50px;
border: 5px solid #CCC;
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
[/code]
And that’s it. Simple.

There are some amazing hover transitions using CSS3 animations. Although we’re still waiting for more browser support, it’s always good to experiment. That will be our next tutorial.