'How to solve the problem of hovering over a split image in css?

Faced a problem that when you hover over half of the image, it starts to twitch instead of popping up information

there is my code https://jsfiddle.net/neketli/u1wd6znh/7/

&-right:hover {
  .card__details-right {
    transform: perspective(2000px) rotateY(0deg);
  }
}

&-left:hover {
  .card__details-left {
    transform: perspective(2000px) rotateY(0deg);
  }
}

&-left:hover ~ .card__image img {
  opacity: 0.5;
  transform: translateX(45%); /*100%*/
}

&-right:hover ~ .card__image img {
  opacity: 0.5;
  transform: translateX(-45%); /*100%*/
}

}

htmlcsssass


Solution 1:[1]

You really can't intuitively do that, since :hover refers to your entire element. However you could do something similar using pseudo elements:

.card__image {
  /* Let's set the ::before and ::after's positions to be relative to our image */
  position: relative;
}

.card__image::before,
.card__image::after {
  position: absolute;
  /* Start from the top */
  top: 0;
  /* Each of the two "hotspots" for the hovers is half the size of the card */
  width: 50%;
  /* Set them to be as tall as the card as well */
  height: 100%;
}


/* ::before is to the left */

.card__image::before {
  left: 0;
}


/* ::after is for the right */

.card__image::after {
  right: 0;
}

.card__image::before:hover {
  /* your behavior for the hover on the left */
}

.card__imahe::after:hover {
  /* your behavior for the hover on the right */
}
<div class="card__image">
  <img src="https://kartinkin.net/uploads/posts/2021-07/1625666505_28-kartinkin-com-p-oboi-so-smislom-krasivie-30.jpg" />
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions