Постепенное появление размытого изображения CSS


Задача

Добиться постепенного появления предварительно размытого изображения средствами исключительно CSS.
Решение

<style>
#im {
filter: blur(10px); 
-webkit-filter: blur(10px); 
-moz-filter: blur(10px);
-o-filter: blur(10px); 
-ms-filter: blur(10px);
transition: 4s;
-webkit-transition: 4s;
-moz-transition: 4s;
-o-transition:4s;
}

#im:hover {
filter: blur(0px); 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px);
-o-filter: blur(0px); 
-ms-filter: blur(0px);
transition: 4s;
-webkit-transition: 4s;
-moz-transition: 4s;
-o-transition:4s;
}
</style>
<img src="art193-1.png" id="im"/>
Комментарий к решению

Используем два свойства CSS - фильтр blur(причем прописываем так, чтобы он работал во всех браузерах) и свойство transition, в котором задаем скорость изменения (также для всех браузеров). Чем выше число в transition, тем ниже будет скорость и тем плавнее будет анимация. Результат можете наблюдать на изображении ниже, так сказать, воочию.

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

тегизаметки, задачи, css, blur, transition




Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Блокируем посетителей по рефереру с помощью htaccess
Альтернативное средневековье
Поля и методы в Java: правила вызова методов