Rotate social media icon / image on mouse hover:
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .social-roll { background-image: url('path/to/gray/image.png'); height: 48px; width: 48px; margin: 10px; float: left; border-radius: 50%; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; transition: all ease 0.3s; } .social-roll:hover { background-image: url('path/to/color/image.png'); box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } |
HTML:
1 | <img class="social-roll" src="/images/social-icon/fb.png" alt="logo" width="30"> |