Обычно ведь как бывает, заходишь на какой-нибудь блог и видишь там

<h1> Название блога </h1>

такой вот заголовок.

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

Во-первых, меняем вид заголовка на такой:

<h1 class="logos"> Название блога </h1>

Это мы добавили класс.

Далее, прописываем в таблицу стилей (style.css) что-то вроде этого:

.logos  {
	display: block;
	width:120px;
	height: 96px;
	text-indent: -9999px;
	background: url(img/logos.gif) no-repeat top left;
	}

.logos:hover {
	display: block;
	width:120px;
	height: 96px;
	text-indent: -9999px;
	background: url(img/logos.gif) no-repeat bottom left;
	}

Где «width» это ширина используемой картинки, «height» её высота, а «img/logos.gif» путь к картинке и её название.

Фишка в том, что высота logos.gif должна быть в 2 раза больше указанного в таблице стилей.
Фактически наш рисунок будет состоять из двух частей – верхней и нижней. Отличаться они могут, например, цветом изображённого на них рисунка.

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

В деле на это можно посмотреть, если зайти на мой блог.
Логотип с надписью «Andrew Solovieff Blog», располагающейся справа вверху, при наведении подсвечивается. Сделано это указанным выше способом.

P.S: Ещё вчера при наведении там ничего не подсвечивалось, но пока писал этот пост решил внедрить эту фичу и у себя.