Spinning social icons hover effect using CSS and HTML

Image hover effects have been quite an asset to a site as it gains visitors attention and also make your site more attractive. You might have seen these kind of effects used in social media buttons in several sites to draw the audience to follow them through it. This post narrates you about a similar kind of spinning social icons hover effect using simple HTML and CSS codes.

1)SINGLE SPIN: In this effect the image will spin only once on mouse hover and it will not return to the original position after the mouse is out.

2) DOUBLE SPIN: In this effect the image will spin twice, the first spin will be when the image is hovered and the image will spin back to its original position when the mouse is out.

CSS CODE:

SINGLE SPIN:

#spin1 img:hover{
     -webkit-transition: all 0.6s ease-in-out;
     -moz-transition: all 0.6s ease-in-out;
     -o-transition: all 0.6s ease-in-out;
     -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
     -webkit-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     transform: rotate(360deg);
                             }

In this spin1 hover effect as you can notice we are using rotate property to spin the image up to our desired angle. I have given the rotate value as 360deg so that the icon can complete a full rotation. You can rotate the image either clockwise or anticlockwise manner. The degree values should be positive (360deg) for clockwise rotation and (-360deg) for anticlockwise rotation.Moreover in this above code the whole code was assigned under the hover condition of the image and therefore the image will undergo one rotation only. 
  

DOUBLE SPIN:

#spin2 img{
     -webkit-transition: all 0.6s ease-in-out;
     -moz-transition: all 0.6s ease-in-out;
     -o-transition: all 0.6s ease-in-out;
     -ms-transition: all 0.6s ease-in-out;
     transition: all 0.6s ease-in-out;
                 }
#spin2 img:hover{
     -webkit-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     transform: rotate(360deg);
                              }

In this spin2 hover effect the hover and the image properties was assigned separately so that the image will undergo rotation when the mouse is hovered on the image. And the image will return to its original position by taking another rotation after the mouse is out from the image. The transition time 0.6 denotes how fast the image transition will be, you can change the value to achieve fast or slow transition of your desire.

HTML CODE:

<div id="spin2">
<p style="border-radius:10px 10px 10px 10px;border:5px solid black;width:420px;">
<a href="Your social profile URL1">
<img src="Your image URL1"> </img> </a>
<a href="Your social profile URL2">
<img src="Your image URL2"> </img> </a>
<a href="Your social profile URL3">
<img src="Your image URL3"> <img> </a>
<a href="Your social profile URL4"> 
<img src="Your image URL4"> </img> </a>
</p>
</div>