Member Panel

Cool CSS3 Thumbnail Hover Effects
October 25th, 2012 - 1 Comment »

 

In this tutorial, I’m going to tell you how to make a simple, yet very engaging thumbnail rollover for your website in CSS3.

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. Actually, there’s a massive amount of effects we can add to the transitioning graphic upon hovering over it. Some of them are the following:

  1. Opacity
  2. Border Radius
  3. Rotate
  4. Animation (infinite possibilities are here)

The HTML

The html should be pretty simple for showing these kind of effects.

I start off by wrapping my thumbnails in a div (“thumbWrap”). All the thumbnail images are individually wrapped in a < span > < / span > tag, We’ll just hash the link (here you can give the address of the full size picture on which you want thumbnail effect to apply).

Place the following HTML in between your < body > < / body > tags.

The CSS

First, you define the width & height of your 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 (125px) 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, opacity of 0.8 and a border.

Last, I add the hover state of the thumbnail by setting its width and height to 150px. Then I change the opacity to 1 (i.e. no transparency), and a border radius of 10px.

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.

Note: IE Problem. Although transitions don’t work in IE, the fallback just takes us back to pre-css3. 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.

Place the following CSS in between your < head > < / head > tags.

And there we have it! Some cool effects to show off your thumbnails on your website!

Related posts:

 

 

One Response

  1. Francis says:

    I tried the demo on a variety of browsers. The cool effect works only in Mozilla Firefox. In IE, only the regular hover effect is seen. Whereas with Chrome, nothing happens.

    Any cross-browser code that you know for this project? Too bad, it’s pretty cool but too Firefox-specific…

Leave a Reply