<div id="social">
<ul class="social-sidebar">
<li><a href="http://www.facebook.com/EgyGeniusOfficial" target="_blank " class="fa" title="صفحتنا على الفيس بوك"></a></li>
<li><a href="http://www.twitter.com/thelover500" target="_blank " class="tw" title="صفحتنا على تويتر">twitter</a></li>
<li><a href="http://www.youtube.com/geeksamu" target="_blank " class="yo" title="قناتنا على اليوتيوب">youtube</a></li>
</ul>
</div>
<style>
#social
.social-sidebar li a, .social-sidebar li a:visited { width: 40px;
height: 40px; display: block; text-indent: -9999px; overflow: hidden;
text-decoration: none; opacity: 0.2;}
#social {}
#social .social-sidebar { margin-top: 10px; float: left; margin-left: 13px; margin-bottom: 11px;}
#social .social-sidebar li { float: left; list-style: none; width: 69px; height: 68px; margin: 0 13px;}
#social .social-sidebar li .tw { background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSQLUIfJRyUv0HRyYNgSUCyX6HEhHLyXuGFpQF6lRMO-5jomsbvhg8VOmhvyuc4m86HEJwOVw1LkekX1CX6JBkK3oVlfacq0hfWCG-ywD8q5aUV1TXsaLM1MEx9nFqevKa0Q5PirW9svU9/s1600/twt.png);
opacity: 1; width: 69px; height: 68px; -webkit-transition: all 1.05s
ease; -moz-transition: all 1.05s ease; -o-transition: all 1.05s ease;
transition: all 1.05s ease;}
#social .social-sidebar li .tw:hover {
-webkit-transition: all 0.55s ease;
-moz-transition: all 0.55s ease;
-o-transition: all 0.55s ease;
transition: all 0.55s ease;
-webkit-transition: all 0.55s ease; -webkit-transform:
rotate(360deg); -moz-transform: rotate(360deg); -o-transform:
rotate(360deg); -ms-transform: rotate(360deg);
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ry514G_DtCJvuThtlFLp0nDeObxcVkgzOpL8XQLTNax1wWMNWVf17FUVoLeqd8elSFjjqX3R4NP2gw3kcabxa9OD8qeSOob7c4n4KYORS5FIr9c2dxrwYHjYBRO_LI6oDU2TY8baBQBR/s1600/tw-hover.png);
}
#social .social-sidebar li .fa { background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Egb8Vg0XmPCvSHTwMecpGf-WhZ-fDv9hABBiHORn3zqutYeNfnyFnKvywWOwAl6kLmqpv0LXu5Bo1JjtUhyNz8gV3ujIL0swJUBYFqCefzHzoZtqTXiKL-Ei5754lYoezxVn_AtT_KQQ/s1600/fcb.png);
opacity: 1; width: 69px; height: 68px; -webkit-transition: all 1.05s
ease; -moz-transition: all 1.05s ease; -o-transition: all 1.05s ease;
transition: all 1.05s ease;}
#social .social-sidebar li .fa:hover {
-webkit-transition: all 0.55s ease; -moz-transition: all 0.55s ease;
-o-transition: all 0.55s ease; transition: all 0.55s ease;
-webkit-transition: all 0.55s ease; -webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg); -o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaGZnF8vFdE41G-sCfFcxEniYRVvt1ZiIdHeSlu2e6GgdD3y5gU1MIunmTLIMeFNCM71WAL9S5fVKd6zxbF2Qyipr0tCROFnel_EVUMVv5P0CGIdw-nS3e5QZwW65UMQyz4pDp3NkFv3p1/s1600/fb-hover.png);
}
#social .social-sidebar li .yo { background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKoOBlwBonv0-zn4cGcVKiVwpIq4WHzGculapvVz4DFXD5zSxgx2bpuk56kBzGaJRnaRoZrC52SFbZqC3nfKOZs4NoEn_D5512vi-ILhqaxaSTAIRelJ2TJs-gs7J87KSPsR3Rl4NpvVwQ/s1600/yo.png);
width: 69px; height: 68px; margin-top: 4px; opacity: 1;
-webkit-transition: all 1.05s ease; -moz-transition: all 1.05s ease;
-o-transition: all 1.05s ease; transition: all 1.05s ease;}
#social .social-sidebar li .yo:hover {
-webkit-transition: all 0.55s ease;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvfV8IIdQ5My_aCV625jDWOvt6tm__i2tvuShafUMv1uBUNpzqjI4yMH09GRrs82x5xP2PYN9Btpfkl8BB4IjvDlihoGPI1rOMTu1b8iGRAoqSCHBjAZztS62l0MOUm-xj1RJFg1uw2ZKi/s1600/yo-hover.png);
}</style>
إرسال تعليق