Эффект приближения и размытия на чистом CSS

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

HTML

Во внутрь тега section с классом .section добавляются 2 основных элемента: элемент .bg добавляет задний фон, элемент img с классом .logo добавляет логотип.

<section class="section">
    <img class="logo" src="http://prog-time.ru/wp-content/uploads/2019/07/logo_prog-time.png" alt="">
    <div class="bg"></div>
</section>

CSS

Стили тоже не сложные. При наведение на логотип будет происходить его размытие, а у заднего фона размытие будет пропадать.

body {
   margin: 0;
}
.section {
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
.logo {
   width: 350px;
   height: auto;
   z-index: 20;
   transition: 1s;
}
.bg {         
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('man1.jpg');
   background-size: cover;
   transition: 1s;
   filter: blur(10px);
}
/*ПРИ НАВЕДЕНИЕ НА ЛОГОТИП ИЗМЕНЯЕМ ЕГО СТИЛИ*/
.logo:hover {
   filter: blur(3px);
   transform: scale(1.2);
   opacity: 0.5;
}
/*ПРИ НАВЕДЕНИЕ НА ЛОГОТИП ИЗМЕНЯЕМ СТИЛИ ЗАДНЕГО ФОНА*/
.logo:hover~.bg {
    filter: blur(0);
    transform: scale(1.2);
}

Контакты