При наведении на ссылку картинка меняется с задержкой. Как исправить?

Question

[a-lexus91_yandex]

Сделал я кнопку, которая будет занимать постоянное место на экране. При наведении на нее хочу менять цвет. Первое, что пришло на ум, просто прописать в hover другую картинку. Но браузере ее не сразу загружает, а только тогда, когда наводят. Из-за этого задержка в несколько секунд, что очень некрасиво - картинка старая пропала, а новая не появилась.
Как исправить?

P.S. проблема на сайте skfu.org

Answer 1

[Юрий Лобанов]

Картинку объедините в одну, слева неактивная, справа активная (или сверху/снизу).
У Вас там есть такой класс .banner-left, в нем напишите разные background-position для обычного состояния и для hover. Для обычного состояния left, для hover - right.

Answer 2

[Андрей Голуменов]

Можно использовать спрайт либо использовать css фильтры, в случае, если картинка та-же самая, и меняется цветовая гамма

Comments

[a-lexus91_yandex]

.banner-left:hover{
filter: saturate(100%);
}
так? не работает почему-то..