Как оставить картинку после эффекта hover

Question

Сделал эффект появления картинки при наведении на текст например(Maro), очевидно что при отводе курсора с текста картинка пропадает. Но нужно сделать так чтобы картинка оставалась. И при наведении на другой текст например(Anna) аналогично. Хочу сделать примерно так https://dribbble.com/shots/4757755/attachments/4757755-Recreo-Hp-Carousel?mode=media как вообще это можно реализовать, подскажите.

body{
    margin: 0;
    padding: 0;
}
.wrapper{
    width: 1440px;
    height: 800px;
    margin: 0 auto;
    text-align: center;
}
.wrapper-content{
    min-height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.imgv span{
    z-index: -1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: 0.5s;

}
.imgv:hover span{
    z-index: -1;
    opacity: 1;

}

<div class="wrapper">
    <div class="wrapper-content">
        <div class="wrapper-content__item">
            <h1 class="imgv">Maro<span class="imgvspan"><img src="img/13.png" alt=""></span></h1>
        </div>
        <div class="wrapper-content__item">
            <h1 class="imgv">Anna<span class="imgvspan "><img src="img/3.png" alt=""></span></h1>
        </div>
        <div class="wrapper-content__item">
            <h1 class="imgv">Anna<span class="imgvspan "><img src="img/12.png" alt=""></span></h1>
        </div>
    </div>
</div>

Answer 1

let div = document.querySelector('div');
div.addEventListener('mouseover', e => e.target.classList.add('active'),{ once: true });

div {
  background: red;
  width: 50px;
  height: 50px;
}

div.active {
  background: blue;
}

<div></div>

Answer 2

Втулите задержку на "unhover":

.imgv span{
    z-index: -1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: 0.5s 180s;

}
.imgv:hover span{
    z-index: -1;
    opacity: 1;
    transition: 0.5s;
}

Думаю, 180 сек. хватит. Не знаю или больше 180 прокатит.

Answer 3

Получается так что должен быть один родитель для всех изображений и так же для всех текстов на которые наводим это для css что бы позиционировать все изображения в центр и также блок с некими ссылками

Смысл в том что бы присвоить одинаковый class так и data-class и при mouseover сравнивать его и показывать тот на который навели - объяснил я конечно плоховато ..

Смотреть на весь экран

let par = document.querySelectorAll(".titles p");
let imgs = document.querySelectorAll(".wrapper img");

par.forEach(function(el) {
  el.onmouseover = function(e) {
    let cls = e.target.dataset.class;
    imgs.forEach(function(img) {
      if (img.classList == cls) {
        img.classList.add("active")
      } else {
        img.classList.remove("active")
      }
    })
  }
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

img {
  display: block;
  width: 300px;
  height: 400px;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)scale(1.5);
  transition: 0.14s linear;
  opacity: 0;
}

.titles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  display: flex;
  justify-content: space-between;
  font-size: 2em;
}

.titles p {
  cursor: pointer;
}

.titles p:hover {
  color: red;
}

.active {
  opacity: 1;
  transform: translate(-50%, -50%)scale(1.2);
}

<div class="wrapper">

  <img class="maya" src="https://img5.likewear.ru/d0/60/d060ff1a10883d40b9b712e048eb3e9a.jpg" alt="">
  <img class="julia" src="https://modnica.info/wp-content/uploads/2014/10/2710-05.jpg" alt="">
  <img class="alejandra" src="https://eveimg.everaoh.com/evei/976ceae81b6b1ec9.jpg" alt="">


  <div class="titles">
    <p data-class="maya">The Maya</p>
    <p data-class="julia">The Julia</p>
    <p data-class="alejandra">The Alejandra</p>
  </div>

</div>

БЛОГ НА HUSL

Как оставить картинку после эффекта hover

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