Если основном мы стараемся создать картинку в красивых оттенках, то нам иногда нужно его сделать черно былым, что все исполним при помощи CSS. Так как при помощи стилистики этот процесс делается весьма быстро и качественно, где не тратим время на фотошоп, а все создаем с помощью стилей CSS.
Для того, чтоб все корректно получилось, то здесь подключаем свойство filter и функцию grayscal, что будет менять оттенок картинки. Для того, чтоб все происходило плавно и безусловно смотрелось красиво, то здесь добавляем свойство transition, где указываем время, что отвечает за переход оттенка цвета.
HTML
Код
<img src="http://zornet.ru/_fr/83/7598030.jpg" alt="" class="cherno-belaya">
<img src="http://zornet.ru/_fr/83/9348590.jpg" alt="" class="cherno-belaya">
CSS
Код
.cherno-belaya {
filter: grayscale(1);
transition: 1s;
}
.cherno-belaya:hover {
filter: grayscale(0);
}
Так как это эффект, то по умолчанию у нас картинки идут в черно белой палитре, но при наведении клика они становятся цветными, и как уже было сказано, здесь можно задать скорость изменение цвета, что качается того, как наведете на картинку.
Демонстрация
[info]В браузере Internet Explorer свойство filter не работает.[/info]
