Spinning Gears

The borders on the DIV and on the links are purely so you can see their boundaries. They can be removed or modified without affecting the operation of the code. The gear image is 60px X 60px so an image of another size might require reworking of the padding and positioning of various elements.

/*Spinning Gears*/
.gear-box { 
padding:30px 30px 30px 60px;
width:250px;
margin:auto;
border:1px solid black;}

.gear-box a {
position:relative;
z-index:1; 
display:block;
border:1px solid black; 
padding:20px 0 20px 0;
margin-bottom:-15px;}

.gear-box a:before {
display:inline-block;
content: url('http://cdn.obsidianportal.com/assets/200913/gear.png');
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
transition:all .6s ease-in-out;
position:absolute;
z-index:-1;
top:0px;
left:-30px;}

.gear-box a:hover:before {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);}

Spinning Gears

Test Campaign Davidnic Davidnic