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


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

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


HTML

Код
<div class="gtedsaxtu-kopeduneg">
  <div class="desamil-bopdsam">
    <p>ZORNET.RU</p>
  </div>
  <div class="desamil-bopdsam">
    <p>ZORNET.RU</p>
  </div>
  <div class="desamil-bopdsam">
    <p>ZORNET.RU</p>
  </div>
</div>

CSS

Код
.gtedsaxtu-kopeduneg{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10%;
  cursor:pointer;
}
.desamil-bopdsam{
  padding:30px;
  margin:2%;
  background:white;
  width:30%;
  border:1px solid #d6d6d6;
  box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
  border-radius:3px;
  transition:.2s all;
}
.gtedsaxtu-kopeduneg:hover .desamil-bopdsam {
  filter:blur(3px);
  opacity:.5;
  transform: scale(.98);
  box-shadow:none;
}
.gtedsaxtu-kopeduneg:hover .desamil-bopdsam:hover{
  transform:scale(1);
  filter:blur(0px);
  opacity:1;
  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
}


Демонстрация
Прикрепления: 6055070.png(13.1 Kb) · css-hover-blur.zip(1.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Эффект размытия для изображение на CSS3 (Создать размытие элемента при наведение курсора)
  • Страница 1 из 1
  • 1
Поиск: