Categories: CSS, Tutorials

CSS3 allows us to animate elements in more ways than before. Below, I’m going to show you how to create an awesome, spinning hover state for any image.

HTML

The markup is simple enough. Our social ID acts as a wrapper which allows us to center the icons.

	<div id="social">
		<a href="http://tehangelscry.deviantart.com/" class="deviantart">DeviantArt</a>
		<a href="https://www.facebook.com/DivineDesignNet" class="facebook">Facebook</a>
		<a href="https://plus.google.com/+DivinedesignsNetBlog" class="google">GooglePlus</a>
		<a href="https://twitter.com/DivineDesignNet" class="twitter">Twitter</a>
	</div> <!--/social-->

CSS

This is where the magic happens.

By adding the transition effects on both the default state and the hover state, we ensure that the spinning animation occurs again when we roll off the icon.

The transition effects in the hover state is for the actual spinning animation. What we’re doing, is rotating the image around its center point by 360 degrees; so it’ll sit in its starting position when the animation is complete. This number could of course be changed to anything!

I’ve added overflow:hidden; to our wrapper element (#social) to ensure that no scrollbars appear when you hover over multiple spinning icons. Without the overflow code, scroll bars will appear.

#social {
    width: 206px;
    margin: 40px auto 0 auto;
	overflow:hidden;
}

#social a {
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
	
	width:48px;
	height:48px;
	display:inline-block;
	text-indent:-9999px;	
}

#social a:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

.deviantart {
	background: url('../images/deviantart.png');
}

.facebook {
	background: url('../images/facebook.png');
}

.google {
	background: url('../images/google_plus.png');
}

.twitter {
	background: url('../images/twitter.png');
}

A pretty simple animation which can add life to any linked image!

Leave a Reply