На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Постепенное появление размытого изображения 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





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




Защита от SQL Injection с помощью кодов в htaccess
Вывод списка файлов и каталогов на C++ средствами WinApi


© upread.ru 2013-2020
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.