Смена картинки при наведении, ролловер-эффект с помощью CSS

Доброго времени суток!

Иногда при создании сайта необходимо организовать ссылку(блок), где при наведении курсором — одно изображение сменяет второе. Чаще всего это осуществляют следующим образом — в CSS для блока прописывают фоном одну картинку, а потом задают свойству hover — другую картинку. Выглядит это следующим образом:

html код самой ссылки(блока с картинкой)

и стили CSS для нее

Такой способ встречается очень часто, но у него есть маленький недостаток. Когда страница загружается, то грузится одна картинка, а когда вы наводите курсором на ссылку(блок) начинает грузится следующая картинка и чем больше ее размер, тем дольше это происходит. Выглядит это примерно так, после наведения картинка исчезает, а через секунду появляется новая. Потом это происходит мгновенно, но первый раз. небольшая задержка. Многим это не нравится, даже раздражает 🙂

Поэтому предлагаю способ №2.

Его идея заключается в использовании одной картинки, вместо двух. Мы просто показываем только одну часть картинки, а после наведения вторую. Называют данный способ — ролловер(rollover) и он имеет свои преимущества: