Animation properties not working

HTML-CSS
1

Hello Campers, so basically I want to place the 2 images on top of each other and my codes are not achieving that, can anyone help. thanks

HTML:

<div id="image-slide">
   <img class="bottom" src="https://www.bourboncoffee.rw/wp-content/uploads/2019/08/bc-coffee.jpg">
	<img class="top" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t1.0-0/p640x640/82130885_2941701955848707_480229944157274112_o.jpg?_nc_cat=106&_nc_sid=dd9801&_nc_ohc=_38ARF6Tgx8AX_qK8Hk&_nc_ht=scontent.flhr4-1.fna&_nc_tp=6&oh=44c5b00a6ff8d881ca3bdbc61f189474&oe=5ECE7C92">

      </div>

and Here is my CSS:

#image-slide img{
  
	width:100%;
	height:400px;
  margin-bottom:20px;
}


#image-slide  {
animation-name: fade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	animation-direction: alternate;
}
@keyframes fade {
  0% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

3

Got it, thanks. I am still new at this forum, bear with me.

4

I did not understand what you are trying to achieve but you can try with position: absolute; and z-index