Замена Изображения При Наведении

Сегодня познакомимся с очень интересным эффектом css - замена изображения при наведении.<br />С помощью данного эффекта можно приукрасить дизайн вашего сайта добавив стили для картинок, которые будут подсвечиваться при наведении.

---

 

Сегодня познакомимся с очень интересным эффектом css - замена изображения при наведении.

С помощью данного эффекта можно приукрасить дизайн вашего сайта добавив стили для картинок, которые будут подсвечиваться при наведении.

Сразу же рассмотрим первый способ, как сделать подсветку изображения при его выделении.

 

a img {
filter:alpha(opacity=50);
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
}

a:hover img {
filter:alpha(opacity=90);
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
}

 

 

Где значение:

0.3 - прозрачность картинки, при том когда мы не навели на изображение.

0.8 - прозрачность картинки при наведении.

После этого все картинки на странице будут иметь данный стиль, если же вы хотите задать отдельный стиль для отдельной картинки - присвойте конкретному атрибуту класс (class).

 

Далее посмотрим как сделать динамическую картинку с помощью css, при этом картинка будет одна, изменяясь в разные.

 

a.dinamic {
background: url('/im/other/facebook.png');
display: block; /*Рисунок как блочный элемент */
width: 19px;
height: 18px;
}

a.dinamic:hover {
background-position:0 -18px;
/* Смещаем по горизонтали */ /* Смещаем вверх по вертикали */
}

 

 

Код вставки меняющейся картинки:

 

 

<a href="#" class="rollover"></a>