Animation properties not working

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


<div id="image-slide">
   <img class="bottom" src="">
	<img class="top" src="">


and Here is my CSS:

#image-slide img{

#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;

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.


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

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