Icons social networks with hover effect

Hello again!

I will not remind you how important social networks to work with the visitors / users. But how to attract the user, so that he clicked on the icon of some social services. network and passed on to you in a band? That's right - like eyes, I mean visually)

Watch the demo "Icons social networks with hover effect"

So, today we will work with the effect of rotation of the image 360 degrees. To use this feature to hover transform: rotate(360deg).

CSS:

#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
/* Turn 360 degrees in aforementioned cursor*/
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Not to prescribe the effect of each image, we simply conclude all the images in a separate div.

HTML:

<div id="social">
<a target="_blank" rel="nofollow" href="http://facebook.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzce5DxCtDvdiIdG5vcj8HkMKMe2PkyO5sKuXBKat0PZi9HBWU0toQW6PiHidnryHYP8YphYD3_p9ORIcYM1oNvKhjstzntIt7M1Is-wD0WaB3EniaD0IXpxBwduPmDWhwbEQuPXRmYQk/s320/facebook.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://google.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW_NIwh5rXvRBZvDJJC508o61zZlwsSgyZ-J4W6bACi6xLoQ5EhPTqQE_1D6sxQQURexdSZX1iZVzuWxLNo5R5wD3cXhdNS6Q4VGtLN4tp7QuuF8_qljT2guRw01WCY2R6aEfiNljO-GI/s320/google_plus.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://instagram.png">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxBXNsqem7VIW0I1Avd4Er4AlTNaA_KWlOkl7GXQ8CLMg7F5I2CVGGntfdWylRrfJNdhpzAz03fHClCqPUxBQe4ykAip56x5Wn5ELk2CFq9A3_kj2inji0Xo4wfZI-G_cSuaaC1wR5eaA/s320/instagram.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://linkedin.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ssPBs16HOa0AXuco10UTtea_xiofd8_xzntxSSNkOZp52PwTZ8etT01Z2OrBbhIkw0FkTtbFZjn251yfofifvwccNZxdq1ReHGxZR3rgUT41oyev_6QtHEtB0ctyDND8uCUjyneHU9I/s320/linkedin.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://gmail.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUQ3uoh8gBvQ615LjykoTIkRh7POE18XisKcQWNEWRomfZc9gM4-sMsHr2xWrDV9WhoWRwFXuUdt_oevwF_BVGS9dCcbuWgl0EN7TZL6CApQ5xsr6SndrGUqjlqUTNi8LO3s-LaaN1kAI/s320/mail.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://odnoklassniki.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWs7iLwd4t-JoUPmGy98onpNPycrQkxg7dzB8VImVlmSHB_i47eboyRWnnfnzDgGzL2cbSOfOmu6nHB0W2Yh3NfUAP1gQXfNW7q9oVFLTBxp5XAVKXoilmV01u8rmj3B2yopWHh6VK9h8/s320/odnoklassniki.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://feedburner.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH0m4wiGMPwa4Oo_9iqxpUj_MYYmbTj14uabYsfXpwqoAq1kMUICBEcaCvyc6M8iIY3cPuKiNZSDnB82JBUUXs27M7g0_8Rfk3ioOK1hDYxZkkuH9Ot42Y78S0ZJF6s4ZgqlSMm4dfJDk/s320/rss.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://vk.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWYDhNZnyAojHxmXJpQOMFjxIirzlC_tD7CniA5xbBKB9gEHjNbGcWIqiRujAzCIRdzphGwLRILPJiVv4FnMCaaBirt-j78ayT1BBI1xbMunsLAc13I8W8R3Cr4GxYbFAmH3SV1UHkzfY/s320/vk_2.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://youtube.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1WvAxOmy_CUfqPLBYeS6Ow_qQNCBXCgmuyP8uKQD8mAbfh1eTSPJTYxa5lizjqm_xOL_6qYqFdthM-P27cTlNT4vYmTuBmMNKWYW-5RUkgdIn7Rn0wU9OBodO5OVhPPRq__JD8g0IBeM/s320/youtube_2.png"style="margin-right: 1px;" /></a>
</div>

Very cool look, this effect on the round icons. To do this, simply make or find a round icons of social networks and change addresses on them. See what comes out!

By the way, do not forget to change the link to your profiles;)
At this, all a pleasant evening and the end of the weekend! Leave your questions in the comments below ! Prior to the meeting;)