Look Inside

Recently my friend had sent me a flash showcase with nifty hover animations inside. It using different hover over animation and hover out animation on it, which mean the hover out animation is not a reverse version of hover over animation. After seeing the showcase, the first thing come to my mind was, does this can be done in CSS3 also? In today’s tutorial I will show you how to create a nifty hover effects with two different hover over animation and hover out animation using CSS3 animations properties, and NO JavaScript needed.

The Idea

The idea was to create two different kinds of animations for both hover over and over out with just CSS3. The over out animation shouldn’t be the reverse version of animation for hover over.

[browser type=”cfs-x”]This working demo only works in browsers that support the respective CSS properties.[/browser]

The HTML Markup

Please note that the entire markup shown here was simplified version of demo, but you will see the complete markup in source files, of course.

Our HTML markup contains two elements, one for hovered object and other as its child element. I will name them as ‘object‘ and ‘child‘.

<div class="object">
<span class="child">Some Text</span>
</div>

The CSS

Also, please note that in following CSS code I will ignore all the browser vendor prefixes, but in the real environment you should include them as well.

First let’s style our object and child. I change the shape of object to circle using CSS3 border-radius properties and apply some gradient effect on it through inset box-shadow properties.