CSS3 Tricks: Animated Hover Effects (3D Flip)

In previous article of our CSS3 Tricks column I showed you how to create rounded buttons and then animate them with CSS3 only. In today’s tutorial we will make animated hover effects on images without any help of javascript. In our last example we will even make a simple 3D flip. I recommend that you download the source files first and check the live demo.

LIVE DEMO

    

[download id=”151″]

ADD IMAGES IN HTML

In our first example we will use a png file as our hover effect. After we move the mouse over the original image the hover effect will fade in with a simple animation (opacity). We will first add a simple image into our html code:

Now create a file called style.css and add the following CSS code to it:

We have to define the background image that represents the hover (imageHover.png). Set width and height to fit to your example. The important part is to set opacity to 0 since we do not want the image to be visible until we actually hover over the image. Animation is defined in the last four lines (transition). We tell the css to use the transitions on opacity only and that length of the transition is 0.2s.

ANIMATE THE HOVER WITH CSS3

It is now time to set the hover effect and the code is actually really simple:

We are finished, you now have a working example of a simple animated hover effect that uses an image as a background. If you like the image that is used as the hover effect you can download the psd version from our freebie section. You can use a color for hover background instead of an image. Simply replace the line background:url(“imageHover.png”); with background:#1e1e20; and it will work right away. Just remember to lower opacity a bit on hover since image is now almost invisible when you move your mouse over it.

SIMPLE 3D FLIP ON HOVER

CSS3 is capable of much more then just simple fading animations. Our next example will implement a simple 3D flip on mouse over. Add the following code to the hmtl file to add the image and some text:

It is now time to define the animation in style.css

As you can see all we have to define are the transitions. We will use easings this time also to make the effect more realistic. All we have to do now is add the 3D rotation that will simulate the flip effect:

That is all that is to it, flip effect already works. More simple then most would expect. To change the axis of the flip simply change rotateY to rotateX or rotateZ.

CONCLUSION

Implementation of animated hover effects with CSS3 is very simple. Even 3D flips are a piece of cake and examples above demonstrate just how powerful and easy to use CSS3 can be. Please note that these animations are only supported in webkit browsers (Chrome, Opera, latest versions of FF). In our future tips&tricks posts I will show you how to make gradients, apply animations to images and much more so stay tuned!

[download id=”151″]