html - 如何将包裹在同一个 div 中的图像堆叠在一起，然后在悬停时将它们与动画分开？

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);
}

这将对所有图像重复，即 nth-of-type(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

检查一下

工作 fiddler 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;
}

还有一个不错的动画。