Я хочу изменить изображения с помощью наведения

Question

Я кодировал свой портфолио с нуля, и я хочу реализовать изменение изображения (от черно-белого до цвета), когда я навешиваю миниатюры в своей галерее. Есть ли способ сделать это легко? У меня 14 изображений, по два снимка (цветные и черно-белые).

Спасибо!

Answer 1

Вы можете сохранить трафик для вас и ваших посетителей и иметь только одно цветное изображение, которое можно обесцветить, используя CSS filter.

Присвоить класс к изображению в формате HTML: <img class="image-bw" src="image.jpeg"/>

Сделайте изображение черно-белое изображение в не парили состояние с помощью этого CSS:

.image-bw { 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
} 

И отключить этот фильтр в наведен состояния:

.image-bw:hover { 
    -webkit-filter: none; 
    filter: none; 
} 

Учтите, что это решение не будет работать в IE. Обратитесь к here за подробной информацией о совместимости браузера. Вы также можете использовать изображения SVG, которые могут быть ненасыщенными в IE, как описано here.

Если вы хотите использовать два изображения, несколько способов сделать это описаны в this question.