Картинка, меняющаяся при наведении курсора. Используем CSS

Здравствуйте, уважаемые читатели моего блога. Сегодня вместе с вами будем делать картинку, которая будет реагировать на наведение курсора мышки с использованием каскадных таблиц стилей (CSS)? а именно псевдокласса hover. Для начала нужно подготовить картинку. Я буду использовать логотип блога. Вы тоже можете потренироваться на нем. Но, прежде, чем начать, его нужно немного изменить. Стандартный размер логотипа — 265×75px.

Как изменить?

Можно этого не делать, а просто взять готовую картинку. Но на всякий случай покажу, как я это делал. Открываем в фотошопе логотип. Создаем новый документ с размерами: 265×150px. Перетаскиваем логотип в новый документ и копируем его Ctrl + J. Копию перемещаем вниз. На копии инструментом прямоугольная область M выделяем только надпись на логотипе. Вырезаем ее Ctrl + X. И сразу вставляем обратно Ctrl + V. Снимаем выделение Ctrl + D. Применяем к этой надписи стили, которые вам нравятся и сохраняем документ. У меня получилось вот так: 

Применяем стили.

В файле style.css или же прямо на странице между тегами head прописываем специальные значения, одно из которых — hover, за счет него как раз и происходит смещение картинки на указанную величину при наведении курсора.

1
2
3
4
5
6
7
8
9
10
11
12

.logo{
background:url(logo.png)0 0;
width:256px; 
height:75px;
margin:150px auto;
}
.logo:hover{
background:url(logo.png)0 75px;
width:256px; 
height:75px;
margin:150px auto;
}

Можно скачать исходники и изучить более подробнее.

ДемоСКАЧАТЬ