[Помогите] Помогите добавить в hover ещё одно свойство

Умные дядьки! Подскажите . Есть код чёрно-белых социальных кнопок для сайта и в нем прописан стиль,при наведении они закручиваются на 360 градусов.Плюс к этому я хочу, чтобы они менялись на цветные.Как и куда нужно прописать ссылку на цветную кнопку.

код
<style> 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>
<div id="social">
<!-- ShareButtons -->
<!-- odnoclassniki -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="http://superprogress.ru/images/od.png" width="40" height="40" title="В Одноклассники"></a></noindex></nofollow></div>
<!-- mail.ru -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="http://superprogress.ru/images/ma.png" width="40" height="40" title="Поделиться в Mail.ru"></a></noindex></nofollow></div>
<!-- facebook -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="http://superprogress.ru/images/fc.png" width="40" height="40" title="Поделиться в Facebook"></a></noindex></nofollow></div>
<!-- twitter -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="_blank" href="http://twitter.com/intent/tweet?text=RT <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="http://superprogress.ru/images/tv.png" alt="Опубликовать в twitter.com" width="40" height="40"></a></noindex></nofollow></div>
<!-- vkontakte -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>"><img src="http://superprogress.ru/images/vk.png" width="40" height="40" title="Поделиться В Контакте"></a></noindex></nofollow></div>
<!-- livejournal -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="http://superprogress.ru/images/lj.png" width="40" height="40" title="Поделиться в ЖЖ"></a></noindex></nofollow></div>
<!-- rss -->
<div class="sharebuttons">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://feeds.feedburner.com/SuperProgressru">
<img src="http://superprogress.ru/images/rss.png" width="40" height="40" title="Подписаться!"></a></noindex></nofollow></div>
<!-- ShareButtons -->
</div>

 

Ну сейчас ты не сделаешь из них цветные, т.к. залиты они у тебя картинками, а не фоном. Для фона возьми сделай мини-спрайт и повесь на <a> класс с каждой картинкой.
Потом при ховере будешь менять bg-position и все будет ок.

Или если есть желание, то можешь через канвас цвет добавить. Но в это случаи нужно будет изначально цветные картинки залить

 

Переделай иконки соц.сетей в спрайты. (Ч/б +цветной вариант) Вот удобный простой сервис: http://csssprites.com/
Далее добавь класс к img , убери src а путь укажи через CSS.