1

Сделал эффект появления картинки при наведении на текст например(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>

3 ответа 3

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>

1
  • Спасибо, хорошее решение
    – Dudd1
    3 окт 2021 в 19:07
0

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>

0

Втулите задержку на "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 прокатит.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.