Иконки, реагирующие на наведение мыши

Используя CSS, можно добиться эффекта увеличения иконок при наведении курсора мыши и возврата их в исходное состояние после ухода мыши.

Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:


<style type="text/css">
.bubblewrap{
list-style-type: none;
margin: 0;
padding: 0;
}

.bubblewrap li{
display: inline;
width: 60px;
height: 50px;
}

.bubblewrap li img{
width: 50px; /* Ширина каждого изображения */
height: 50px; /* Высота каждого изображения */
border: 0;
margin-right: 22px; /* Расстояние между изображениями */
-moz-transition: -moz-transform 0.1s ease-in; /* animate transform property */
-webkit-transition: -webkit-transform 0.1s ease-in; 
-o-transition: -o-transform 0.1s ease-in; /* animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform: scale(1.8); /* масштабировать до 1.8x */
-webkit-transform: scale(1.8);
-o-transform: scale(1.8);
}
</style>

Маркером выделены возможные приоритетные настройки.

2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть иконки:


<ul class="bubblewrap">
<li><a href="#"><img src="img/blogger.png" title="Blogger" alt="Blogger"></a></li>
<li><a href="#"><img src="img/email.png" title="Email" alt="Email"></a></li>
<li><a href="#"><img src="img/facebook.png" title="Fasebook" alt="Fasebook"></a></li>
<li><a href="#"><img src="img/googleplus.png" title="Google+" alt="Google+"></a></li>
<li><a href="#"><img src="img/instagram.png" title="Instagram" alt="Instagram"></a></li>
<li><a href="#"><img src="img/rss.png" title="RSS" alt="RSS"></a></li>
<li><a href="#"><img src="img/skype.png" title="Skype" alt="Skype"></a></li>
<li><a href="#"><img src="img/twitter.png" title="Twitter" alt="Twitter" ></a></li>
<li><a href="#"><img src="img/youtube.png" title="You Tube" alt="You Tube"></a></li>
</ul>