How to add rotateing Social Icons to your site
on
The lesson Today about an CSS widget
very simple like the other lessons before
just follow the explanation
just add this code in your HTML part
<style>
a.masrdesignsocialicon img {
}
a.masrdesignsocialicon:hover img {
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>
<div align="center">
<table border="0" width="100%" id="table1" height="100">
<tr>
<td>
<p align="center">
<a class="masrdesignsocialicon" href="http://www.facebook.com/masrydesigns"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5brUyBENZwbwSVDsjVUWXqky1WzTAy28Hs7asbfSjlpnhiTo3VbZO6JIoIm3OD6WPsithFLFuO9Kd5Jp8CALui-cUNNDgDEn1LYa4SzNDKK1nDwFCAnc_IPy3pGoHxo4ExENqvp3Q9OVf/s1600/masrdesign-facebook+-+Copy.png" alt="Facebook" width="80" height="80" /></a>
<a class="masrdesignsocialicon" href="https://twitter.com/MohamedSalahMan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Os6635TKMeg_RsOydsL2q-lgIi87UOQazzEBHydlfvINrzZj0R9pYClb0MKRpWsBO-QKfFKaqf8v0nhAfIAKnMcbNJirzbfejlrUJ8ojnxGOMszRR2WMvW0eebUvcq78aunvoa5aL932/s1600/masrdesign-twitter+-+Copy.png" alt="twitter" width="80" height="80" /></a>
<a class="masrdesignsocialicon" href="http://www.youtube.com/m7mdsala7mansor"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihKuAw21Yr4rNvnoarIGxTSsXqSn7WYoJnDqWiJF9VHWrGjz5qY6JVQbALnlWHyHeBoBrqes6oY6Tbhoku-x6lwnam5Sph8im4vGApXBdkqY5JKsXUnTeqROAHvuyfwx3HUDylmXMO71HC/s1600/masrdesign-youtube+-+Copy.png" alt="Youtube" width="80" height="80" /></a> </p>
</td>
</tr>
</table>
</div>
The end of the lesson
any question contact me
Dont forget see other lessons click here
