Question

HTML：

<div class="mySlides">
    <img src="1.jpg">
    <img src="2.jpg"/>
    <img src="3.jpg"/>
    <img src="4.jpg"/>
    <img src="5.jpg"/>
</div>

CSS：

.mySlides {
    padding-top: 25%;
    padding-left: 5%;
}
.mySlides img {
    object-fit: cover;
    position: absolute;
    max-width: 35%;
}


.mySlides img:nth-of-type(1) {
    left: 0%;
    top: 0%;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}

对于所有图像，即第n个类型（2,3,4,5）

，将重复这一过程

.mySlides img {
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    padding: 10px 10px 30px 10px;
    background: linear-gradient(#ffffff, #eaeaea);
    border: solid 1px black;
}

我想将图像堆叠在一起，让它们全部集中在屏幕上。在悬停时，我希望图像在保持动画的同时水平分离。

Answer 1

这是你需要的吗？

＆＃13;

.mySlides {
  display: flex;
  position: relative;
}

.mySlides img {
  position: absolute;
  top: 0;
  left: 0;
}

.mySlides:hover img {
  position: relative;
  top: auto;
  left: auto;
}

＆＃13;

<div class="mySlides">
  <img src="http://placehold.it/300x150/000000">
  <img src="http://placehold.it/300x150/003300" />
  <img src="http://placehold.it/300x150/00ff00" />
  <img src="http://placehold.it/300x150/006600" />
  <img src="http://placehold.it/300x150/ff0000" />
</div>

＆＃13;

Answer 2

检查出来

工作小提琴手https://jsfiddle.net/RaajNadar/L0ennqwp/

HTML

<div class="mySlides">
    <img src="http://lorempixel.com/400/200/">
    <img src="http://lorempixel.com/400/200/sports"/>
</div>

CSS

.mySlides {
  position: relative;
}

.mySlides img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 300px;
  transition: left 1.2s ease-in-out;
}

.mySlides:hover img:last-child {
  left: 300px;
}

也有一个很好的动画。

如何将图像叠加在同一个div中，然后在我悬停时将它们与动画分开？

2 个答案: