Hover-эффекты изображений с использованием CSS фильтра размытия

HTML и CSS WordSmall

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

В сегодняшнем примере рассмотрим использование фильтра «размытие» для ховер-эффекта изображения. Естественно, в комбинации с другими свойствами, чтобы достичь динамического результата.

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

Скачать исходник

Источник: http://www.dynamicdrive.com/style/csslibrary/item/css3_blur_filter_images/

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code