• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффект CSS в размытия изображения (Эффект размытия фона матового стекла с помощью CSS)
Создать эффект CSS в размытия изображения
Kosten
Дата: Четверг, 2019-10-03, 18:29 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25011
Награды: 57


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

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

Пример:



HTML

Код
  <img src="http://zornet.ru/_fr/24/2710549.jpg" class="razmytaya-kartinka" alt="Интересные решения для вебмастера">
  <img src="http://zornet.ru/_fr/24/1382114.jpg" class="razmytaya-kartinka" alt="ZorNet.Ru — сайт для вебмастера">

CSS

Код
   .razmytaya-kartinka {
    filter: blur(5px); /* Размытие */
    transition: 1s; /* Время перехода */
   }
   .razmytaya-kartinka:hover {
    filter: blur(0); /* Отменяем размытие */
   }

При наведение клика появляется реальная картинка, но только стоит убрать курсор, так как автоматически происходит размытые.

Демонстрация
Прикрепления: 7716798.jpg(23.5 Kb) · dsanreds.zip(2.0 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффект CSS в размытия изображения (Эффект размытия фона матового стекла с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: