фокус на элемент при наведение курсора

Фокусировка на элементе при наведение курсора. Практика CSS

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

box

box

box

HTML

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

<div class="box-wrap">
  <div class="box">
    <p>box</p>
  </div>
  <div class="box">
    <p>box</p>
  </div>
  <div class="box">
    <p>box</p>
  </div>
</div>

CSS

В CSS мы просто зададим стили для элементов в статике и стили когда пользователь наводит курсор на боксы.

.box-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10%;
}
.box{
  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; 
}
.box-wrap:hover .box{
  filter:blur(3px);
  opacity:.5;
  transform: scale(.98);
  box-shadow:none;
}
.box-wrap:hover .box:hover{
  transform:scale(1);
  filter:blur(0px);
  opacity:1;
  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

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

avatar
  Подписаться  
Уведомление о