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);
}
The above styling will apply to all images with 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;
}
I intended for the images to be stacked on top of each other and centered on the screen. Upon hovering over them, they should separate horizontally while retaining the animation effect.