Применить CSS фильтр к изображению очень легко. С помощью фильтров мы можем изменить цветовое содержание изображения и по наведению мыши, возвращать его изначальное состояние. Конечно всё это же самое можно сделать и с помощью фотошопа, но в этом случае нам придётся использовать два изображения.

Применение

Чтобы сделать изображение чёрно-белым:

Код: Выделить всё

img {  
     -webkit-filter: grayscale(100%);  
}
Изображение
Чтобы сделать изображение цветным, при наведении мыши, нам нужно чуть подправить фильтр:

Код: Выделить всё

img:hover {
     -webkit-filter: grayscale(0%);
}
Т.е. изменить 100% на 0%.


Сепия:

Код: Выделить всё

img {  
     -webkit-filter: sepia(100%);  
}
Изображение
Для наведения мыши:

Код: Выделить всё

img:hover {
     -webkit-filter: sepia(0%);  
}

Яркость:

Код: Выделить всё

img {  
    -webkit-filter: brightness(50%);   
}
Изображение
Для наведения мыши:

Код: Выделить всё

img:hover {
     -webkit-filter: brightness(0%);  
}

Контраст:

Код: Выделить всё

img {
    -webkit-filter: contrast(200%);
}
Изображение
Для наведения мыши:

Код: Выделить всё

img:hover {
     -webkit-filter: contrast(100%);  
}

Размытие:

Код: Выделить всё

img {
    -webkit-filter: blur(10px);
}
Изображение
Для наведения мыши:

Код: Выделить всё

img:hover {
     -webkit-filter: blur(0px);
}​
В нашем примере фильтры будут работать только в Chrome 19 и выше. Пока что в этом и есть один большой минус применения данных фильтров.
Комментарии: 2

romaamor 22 окт 2012, 11:05 Сообщение

CabinetAdmin писал(а): можем изменить цветовое содержание изображения и по наведению мыши,
А картинки загруженные с другого ресурса таким мокаром работать не будут ?
Типа Вставка адреса на картинку в сообщение.
  • 0

CabinetAdmin 22 окт 2012, 14:43 Сообщение

А какая разница по какому адресу находится изображение?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы