CSS: смена картинки при наведении курсора

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

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

Шаг 1. Готовим картинку.
В ней мы разместим сразу две наши картинки. Должно получиться примерно так:
Верхняя — это картинка без наведения курсора, а нижняя — при наведении. Здесь нужно постараться сделать их одинаковыми.

Шаг 2. Добавляем собственно сам стиль.

#displacement
{
    background: url(expbutton.png);
    display: block;
    width: 233px;
    height: 92px;
}

#displacement:hover
{
    background-position: 0 -96px;
}

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

Шаг 3. В месте отображения картинки выставляем:

<div id="displacement"></div>

Результат всех наших деяний можно увидеть здесь.

При перепубликации активная ссылка на этот блог обязательна.
Поблагодарить автора 🙂
 руб.