html css накладывает несколько изображений

Question

html css накладывает несколько изображений

Как наложить несколько изображений в одну строку с помощью css и html?
Пример: если мой курсор находится на изображении1, я хочу, чтобы все изображения справа были нажаты вправо, как будто я вижу изображение1

Вот что я сделал до сих пор:

HTML

<body>
            <div class="deck">
                <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage">
              <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage">
              <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage">
              <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage">

            </div>
 </body>

CSS

.deck {overflow:hidden}
.deck img {position:relative; float:left;  width:185px; height:278px}
.deck img + img {margin-left: -160px;}
.deck img:hover {z-index:9999; border:1px solid red; background: pink}

https://jsfiddle.net/53ryuapx/

html,css,

1

Ответов: 1

HTML, CSS,

Похожие вопросы

score 1 · Accepted Answer

1

Вы можете использовать ~селектор для выбора всех изображений, следующих за тем, который вы наводите. И поскольку изображения позиционируются относительно, вы можете комбинировать это со leftзначением:

.deck img:hover ~ img {
    left: 160px;
}

Могу ли я даже предложить вам объединить это с относительно новым clip-pathсвойством? К сожалению, поддержка браузера невелика .

.deck img:hover ~ img {
  left: 160px;
  clip-path: inset(0 160px 0 0)
}

Изменить: Существует несколько способов оживить это в зависимости от результата, который вы предпочитаете. Это может потребовать некоторого tewaking, чтобы получить результат, который вы хотите, но это должно заставить вас начать. Что здесь происходит, мы объявляем анимацию ключевого кадра slidein. Когда изображение зависает, изображения справа анимируются с использованием animation: slidein .2s. См. Эффект в этом JSFiddle :

@keyframes slidein {
  0% {
    left: 0;
    clip-path: inset(0 0 0 0);
  }
  100% {
    left: 160px;
    clip-path: inset(0 160px 0 0);
  }
}
.deck img:hover ~ img {
  left: 160px;
  clip-path: inset(0 160px 0 0);
  animation: slidein .2s;
}