Современный интернет ресурс или блог полон разнообразной анимации. Например, простой анимацией может быть увеличение изображений при наведении в том контейнере области, где происходит присмотр. Но вашему вниманию эффект размытие, это когда мы видим несколько элементов, и при наведение на один из них, то остальные начинают исчезать, что смотрится оригинально.
Так как ваша информация, на которую вы навели осталась читаемой, что можно задействовать этот трюк анимация на разных этапах при создание сайта. Вообщем по мне потрясающий анимационный эффект, который может размыть все картинки и блоки при наведении на размытие.
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);
}
Демонстрация
