Hover effect on div when hovering over anchor link outside div parent

Question

I'm trying to scale a div which contains a background image when an anchor link is hovered upon.

I have seen similar questions before, namely this one. The solution here however, isn't ideal for me as my hover effect triggers when the anchor link is hovered upon (therefore cannot use pointer-events).

Essentially, when someone hovers over .card__link, I want to scale .card__image.

How do I go about this?

.card__overflow {
  overflow: hidden;
}
.card__image {
  background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
  transition: all 0.5s ease;
  height: 300px;
  width: 300px;
  background-size: cover;
  background-repeat: no-repeat;
}
.card__link:hover {
  color: orange;
  text-decoration: underline;
}
.card__link:hover ~ .card__image {
  transform: scale(1.2);
}

<div class="card">

  <div class="card__overflow">
    <div class="card__image"></div>
  </div>

  <div class="card__body">
    <div class="card__action">
      <a class="card__link" href="#">Learn more</a>
    </div>
  </div>

</div>

This is not possible using CSS with your current structure. But it is possible with JS. — m4n0, Jun 10 '21 at 11:35

score 0 · Answer 1 · answered Jun 10 '21 at 11:36

The actual code for hover should be like this in the css please check for the css changes that has been made it works like that.

.card__overflow {
  overflow: hidden;
}

.card__image {
  background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
  transition: all 0.5s ease;
  height: 300px;
  width: 300px;
  background-size: cover;
  background-repeat: no-repeat;
}

.card__link:hover {
  color: orange;
  text-decoration: underline;
}

.card__body:hover~.card__overflow {
  transform: scale(1.2);
}

<div class="card">

  <div class="card__body">
    <div class="card__action">
      <a class="card__link" href="#">Learn more</a>
    </div>
  </div>

  <div class="card__overflow">
    <div class="card__image"></div>
  </div>

</div>

score 0 · Answer 2 · answered Jun 10 '21 at 11:41

It can be easily done with JS.

const link = document.querySelector(".card__link");
const image = document.querySelector(".card__image");

link.addEventListener("mouseenter", () => {
  image.classList.add("scale-up")
  image.classList.remove("scale-down")
})

link.addEventListener("mouseleave", () => {
  image.classList.remove("scale-up")
  image.classList.add("scale-down")
})

.card__overflow {
  overflow: hidden;
}

.card__image {
  background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
  transition: all 0.5s ease;
  height: 300px;
  width: 300px;
  background-size: cover;
  background-repeat: no-repeat;
}

.card__link:hover {
  color: orange;
  text-decoration: underline;
}

.scale-up {
  transform: scale(1.2);
}

.scale-down {
  transform: scale(1);
}

<div class="card">

  <div class="card__overflow">
    <div class="card__image"></div>
  </div>

  <div class="card__body">
    <div class="card__action">
      <a class="card__link" href="#">Learn more</a>
    </div>
  </div>

</div>

Hover effect on div when hovering over anchor link outside div parent

2 Answers2