أيقونات المواقع الإجتماعية بشكل رائع وبتاثير جميل


الكود:

    <style> #social a:hover {background-color:
    transparent;opacity:0.7;} #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; } #social img:hover { -moz-transform:
    rotate(360deg); -webkit-transform: rotate(360deg); -o-transform:
    rotate(360deg); -ms-transform: rotate(360deg); transform:
    rotate(360deg); } </style>
<center>
        
    <div id="social">
                  
        <center>
                
            <p id="hb_socialicons">
                        <img src="http://4.bp.blogspot.com/-fMoUU-D44fU/UXx-M91SYTI/AAAAAAAABAA/Hge4QoIf9MA/s1600/facebook.png" border="0" />     <a href="رابط الصفحة على تويتر">     <img src="http://3.bp.blogspot.com/-WHMcE1Tn-n0/UXx-N1QcCzI/AAAAAAAABAM/PfnRhM5xNu4/s1600/twitter.png" border="0" /></a>     <a href="رابط جوجل بلس">     <img src="http://3.bp.blogspot.com/-Yuv8C1jJ9h0/UXx-NoxvzMI/AAAAAAAABAE/2IjFbS0nZww/s1600/googleplus.png" border="0" /></a>     <a href="رابط تغذية rss"><img src="http://1.bp.blogspot.com/-A_XjgOqh_hw/UXx-NFriOzI/AAAAAAAAA_8/DyhzO9Evb20/s1600/rss.png" border="0" /></a>       
            </p>
                
        </center>
            
    </div>
</center>








يتم وضعه بأى مكان يقبل html فى (التشكيلات العامة أو العناصر المستقله)