Как плавно увеличить картинку при наведении на другой элемент?

Question

Текст снизу, картинка в другом месте, как сделать чтоб она плавно увеличилась когда наводишь на текст?
Подобную анимацию вы можете увидеть например на ForceDrop, где при наведении на название "Кейса" он увеличивается, но сам текст не изменяется в размерах.

.first {
  display: block;
}

.first img {
  transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
}

.first img:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

<div class="first">
  <a class="card" href="#">
    <img class="product" src="https://i.imgur.com/Y04z1fL.png" alt="">
    <span class="card-name">Pets simulator</span>
    <span class="price">9999.99<span class="purp">₽</span></span>
  </a>
</div>

Надо ли будет прибегнуть к JS или это можно реализовать через css?

Answer 1

Если проект поддерживает псевокласс :has(), то можно сделать так:

.card {
  display: block;
}

.card .product {
  display: block;
  width: 200px;
  overflow: hidden;
}

.card .product img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

.card:has(.card-name:hover) .product img {
  transform: scale(1.1);
}

.card .product:hover img {
  transform: scale(1.1);
}

<div class="first">
  <a class="card" href="#">
    <div class="product">
      <img src="https://i.imgur.com/Y04z1fL.png" alt="">
    </div>
    <span class="card-name">Pets simulator</span>
    <span class="price">9999.99<span class="purp">₽</span></span>
  </a>
</div>

Если нет, то можно при помощи смежного селектора (+) или селектора следующего элемента (~), и изменения позиции элемента через order:

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.card .product {
  display: block;
  width: 200px;
  overflow: hidden;
}

.card .product img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

.card .product {
  order: -1;
}

.card .card-name:hover ~ .product img,
.card .product:hover img {
  transform: scale(1.1);
}

<div class="first">
  <a class="card" href="#">
    <span class="card-name">Pets simulator</span>
    <div class="product">
      <img src="https://i.imgur.com/Y04z1fL.png" alt="">
    </div>
    <span class="price">9999.99<span class="purp">₽</span></span>
  </a>
</div>

БЛОГ НА HUSL

Как плавно увеличить картинку при наведении на другой элемент?

Ответы (1 шт):