<style type="text/css">   p#socialicons img{ /* 1st set of icons.  Rotate them 360deg onmouseover and out */ -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; }   p#socialicons img:hover{ -moz-transform:  rotate(360deg); -webkit-transform: rotate(360deg); -o-transform:  rotate(360deg); -ms-transform: rotate(360deg); transform:  rotate(360deg); }   p#socialicons2 img{ /* 2nd set of icons. Rotate them  60deg onmouseover and out */ -moz-transition: all 0.2s ease-in-out;  -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s  ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s  ease-in-out; }   p#socialicons2 img:hover{ -moz-transform:  rotate(70deg); -webkit-transform: rotate(70deg); -o-transform:  rotate(70deg); -ms-transform: rotate(70deg); transform: rotate(70deg); }    p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg  onmouseover ONLY. Note where the "transition prop is added */ }    p#socialicons3 img:hover{  -moz-transition: all 0.5s ease-in-out;  -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>  <p> </p> <p id="socialicons"><a  href="{$post['profilelink_plain']}"><img src="{$post['avatar']}"  alt="" />