Only HTML and CSS Carousel with a weird line that is not a border

Issue

I'm trying to do an automatic image carousel only with HTML and CSS. It seems it works but I'm seeing an ugly line that is not a border that goes over the images.

It seems some kind of delimiter of the outer container but I'm not able to identify it, I don't find it in the docs, and I cannot remove it.

What is that line? How can I remove it?

Thanks!

CodePen: https://codepen.io/Pablo-F/pen/yLZEZmy?editors=1111

The code:

HTML:

  <div class="paintings">
    <img id="painting1" class="swap_vertical">
    <img id="painting2" class="swap_vertical">
    <img id="painting3" class="swap_vertical">
  </div>

CSS:

img {
    object-fit: contain;
    text-align: center;
    margin: auto;
}

.paintings {
    display: flex;
    justify-content: center;
    object-fit: contain;
    width: 50%;
}

.swap_vertical {
    width: 30%;
    height: 60%;
    max-width: 100%;
    max-height: 100%;
}

#painting1, #painting2, #painting3  {
    position: absolute;
    animation-timing-function: ease-in-out;
    opacity: 0;
    padding-top: 5%;
}

#painting1 {
    z-index: 4;
    animation: fade1 5s infinite;
    background: url("https://images.pexels.com/photos/18715721/pexels-photo-18715721/free-photo-of-comida-ligero-naturaleza-verano.jpeg");
    background-repeat: no-repeat;
    background-size: contain;
}

#painting2 {
    z-index: 2;
    animation: fade2 5s infinite;
    background: url("https://images.pexels.com/photos/17855161/pexels-photo-17855161/free-photo-of-carretera-hierba-plantas-orilla.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
    background-repeat: no-repeat;
    background-size: contain;

}

#painting3 {
    z-index: 5;
    animation: fade3 5s infinite;
    background: url("https://images.pexels.com/photos/18923508/pexels-photo-18923508/free-photo-of-ciudad-coches-carretera-calle.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
    background-repeat: no-repeat;
    background-size: contain;
}



@keyframes fade1 {
    5%, 32% {
      opacity: 1;
    }

    0%, 36%, 50%, 60%, 100%{
      opacity: 0;
    }
  }

  @keyframes fade2 {
    38%, 65% {
      opacity: 1;
    }

    0%, 25%, 30%, 66%, 100%{
      opacity: 0;
    }
  }


  @keyframes fade3 {
    69%, 98% {
      opacity: 1;
    }

    0%, 25%, 32%, 64%, 100%{
      opacity: 0;
    }
  }

Solution

img tag cannot be without src attribute, the line is because of that; the browser is missing the images, so it highlights their places. In other words: the square that can be seen is a placeholder for the images. Use span instead, like so:

img {
    object-fit: contain;
    text-align: center;
    margin: auto;
}

.paintings {
    display: flex;
    justify-content: center;
    object-fit: contain;
    width: 50%;
}

.swap_vertical {
    width: 30%;
    height: 60%;
    max-width: 100%;
    max-height: 100%;
}

#painting1, #painting2, #painting3  {
    position: absolute;
    animation-timing-function: ease-in-out;
    opacity: 0;
    padding-top: 5%;
}

#painting1 {
    z-index: 4;
    animation: fade1 5s infinite;
    background: url("https://images.pexels.com/photos/18715721/pexels-photo-18715721/free-photo-of-comida-ligero-naturaleza-verano.jpeg");
    background-repeat: no-repeat;
    background-size: contain;
}

#painting2 {
    z-index: 2;
    animation: fade2 5s infinite;
    background: url("https://images.pexels.com/photos/17855161/pexels-photo-17855161/free-photo-of-carretera-hierba-plantas-orilla.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
    background-repeat: no-repeat;
    background-size: contain;

}

#painting3 {
    z-index: 5;
    animation: fade3 5s infinite;
    background: url("https://images.pexels.com/photos/18923508/pexels-photo-18923508/free-photo-of-ciudad-coches-carretera-calle.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
    background-repeat: no-repeat;
    background-size: contain;
}



@keyframes fade1 {
    5%, 32% {
      opacity: 1;
    }

    0%, 36%, 50%, 60%, 100%{
      opacity: 0;
    }
  }

  @keyframes fade2 {
    38%, 65% {
      opacity: 1;
    }

    0%, 25%, 30%, 66%, 100%{
      opacity: 0;
    }
  }


  @keyframes fade3 {
    69%, 98% {
      opacity: 1;
    }

    0%, 25%, 32%, 64%, 100%{
      opacity: 0;
    }
  }

<div class="paintings">
    <span id="painting1" class="swap_vertical"></span>
    <span id="painting2" class="swap_vertical"></span>
    <span id="painting3" class="swap_vertical"></span>
  </div>

Answered By - iorgv