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

Эффект приближения и размытия на чистом 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);
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

5
Оставить комментарий

avatar
5 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
2 Авторы комментариев
treantincJanleF Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
JanleF
Гость

Viagra No Presciption [url=https://apcialisle.com/#]Cialis[/url] Buy Clonidine Fast Cialis Stendra Ed Best Website

JanleF
Гость

Priligy Dapoxetine In India [url=https://apcialisle.com/#]Cialis[/url] Generic Bentyl Website Pills Store best site to buy cialis online Tfr Medicament

JanleF
Гость

Viagra Generico Ritardante [url=https://abuycialisb.com/#]buy cialis pro[/url] Buy Generic Tadalis Sx Cialis On Line Amoxicilina Discount Medicine

JanleF
Гость

Levitra Dosage Strengths [url=https://buycialisuss.com/#]Buy Cialis[/url] Levitra Dolor De Cabeza Buy Cialis Kamagra Veloce

treantinc
Гость
treantinc

Cialis Pharmacie Trokvome [url=https://ascialis.com/#]Cialis[/url] Artegelp Order Alli nagnincarp Cialis psyproneeree Donde Comprar Viagra En Usa