Как создать эффект размытия при наведении на карточку товара | CSS Card Design with Hover Blur Effect

Сегодня Вы узнаете, как создать эффект размытия при наведении карточку товара используя HTML и CSS. Надеюсь, это видео будет полезным для вас. Если у вас возникнут какие-либо трудности при создании этого кода, вы можете скачать готовый код, нажав кнопку «СКАЧАТЬ».

СКАЧАТЬ

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

HTML КОД:

<div class="cards">
    <div class="card">
      <div class="image">
        <img src="./image-1.jpg" alt="Image">
      </div>
      <h2 class="title">Title</h2>
      <p class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, facilis.
      </p>
    </div>
    <div class="card">
      <div class="image">
        <img src="./image-2.jpg" alt="Image">
      </div>
      <h2 class="title">Title</h2>
      <p class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, facilis.
      </p>
    </div>
    <div class="card">
      <div class="image">
        <img src="./image-3.jpg" alt="Image">
      </div>
      <h2 class="title">Title</h2>
      <p class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, facilis.
      </p>
    </div>
  </div>

CSS КОД:

@import url('https://fonts.googleapis.com/css2?family=Merienda&display=swap');
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: #212121;
  color: #c0c0c0;
  font-family: 'Merienda', cursive;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cards {
  display: flex;
  gap: 100px;
}
.card {
  width: 250px;
  height: 350px;
  border-radius: 20px;
  background-color: #212121;
  box-shadow: 12px 12px 25px #191919, -12px -12px 25px #3c3c3c;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.image {
  width: 95%;
  height: 160px;
  border-radius: 20px;
  overflow: hidden;
  margin: 7px auto;
}
.title {
  margin: 20px 0;
  letter-spacing: 3px;
}
.text {
  line-height: 1.6;
}
.cards .card:hover {
  transform: scale(1.05);
}
.cards:hover > .card:not(:hover) {
  filter: blur(5px);
  transform: scale(0.95);
}