6741
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Всем привет. Делаю сайт для газеты,ну и там понадобился такой эффект чтобы все фото были черно-белые,а при наведении становились цветными.Порыскал по интернету и нашел несколько способов :
Некоторые делают это на Flash,
Ещё не перестали делать на Javascript,
Но лучший вариант это - CSS3.
Итак приступим.
Сначала обесцветим наши изображения ,для этого в CSS3 есть специальное средство filter.
Открываем наш файл стилей и добавляем или заменяем
Код : css
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}Далее делаем так, чтобы при наведении на изображение, оно плавно становилась цветной.
Для этого немного дополним наш предыдущий стиль:
Код : css
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
/*Добавим вот такой вот код transition*/
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
img:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
}В первый параметр можно указать определённое свойство (например height, чтобы анимировать только высоту), а во второй время в секундах (можно в десятичных дробях — 0,1s).
Можешь почитать и вот эту статейку "Открытие нового окна на js"
Это тоже интересно
-
{entries}
