Хаки и Скрипты Next Generation CMS : Изображения, CSS : Обесцветить картинку CSS и CSS3 transitions

irbees2008 Опубликовано - 4 - февраля Изображения

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет. Делаю сайт для газеты,ну и там понадобился такой эффект чтобы все фото были черно-белые,а при наведении становились цветными.Порыскал по интернету и нашел несколько способов :
Некоторые делают это на Flash,
Ещё не перестали делать на Javascript,
Но лучший вариант это - CSS3.

Итак приступим.
Сначала обесцветим наши изображения ,для этого в CSS3 есть специальное средство filter.
Открываем наш файл стилей и добавляем или заменяем

Код:

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 */
}

Вот теперь все изображения на странице стали черно-белыми.

Далее делаем так, чтобы при наведении на изображение, оно плавно становилась цветной.
Для этого немного дополним наш предыдущий стиль:

Код:

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;
  }

Теперь изображения при наведении становятся цветными, также мы воспользовались CSS3 transition, чтобы сделать процесс обесцвечивания анимированным ,параметр all в transition говорит, что правило будет работать для всех стилей, а второй параметр — время анимации.
В первый параметр можно указать определённое свойство (например height, чтобы анимировать только высоту), а во второй время в секундах (можно в десятичных дробях — 0,1s).

Можешь почитать и вот эту статейку "будем ставить Lightbox 2"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.