My goal is to smoothly slide three images inside a div, one by one. However, I'm facing an issue where the images stack on top of each other and end up stuck in their original positions.
Here is the code snippet I've been working with:
<div class="parent">
<div class="images">
<img src="images/food.jpg" class="img1"></img>
<img src="images/food2.jpg" class="img2"></img>
<img src="images/food3.jpg" class="img3"></img>
</div>
</div>
.parent {
display: inline-block;
width: 1080px;
height: 333px;
}
.images {
float: right;
padding: 20px;
}
.images img {
animation: slide-left 0.5s;
margin-left: 20px;
box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.3);
height: 293px;
}
@keyframes slide-left {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
After some time, I want the image to then transition out. You can view how it currently looks by following this gyazo link due to size constraints:
I have also created a Photoshop animation to illustrate the desired effect - images entering and exiting: