crossfade slideshow

by davidxmartins

HTML

<div class="hero">



<div class="hero-left">
<h1><span>Celebrate</span> Your<br>Favorite Places
</h1>
</div>

<div class="hero-right">
<div class="fadein">
    <img id="f3" src="https://cdn.shopify.com/s/files/1/0618/8846/3067/products/[email protected]?v=1645563214">
    <img id="f2" src="https://cdn.shopify.com/s/files/1/0618/8846/3067/products/[email protected]?v=1645826019">
    <img id="f1" src="https://cdn.shopify.com/s/files/1/0618/8846/3067/products/[email protected]?v=1646131754">
</div>
</div>

</div>

CSS

.hero {
  width: 100vw;
  height: 100vh;
}
.hero h1 {
  font-family: Montserrat;
  font-weight: 900;
  font-size: 4vw;
  color: black;
  line-height: 1;
  padding-top: 40vh;
  text-transform: uppercase;
}
.hero span {
  color: #a2a3b0;
}
.hero-left {
  width: 50vw;
  height: 100vh;
  float: left;
}
.hero-right {
  width: 50vw;
  height: 100vh;
  float: left;
}

.fadein {
width: 500px;
height: 500px;
background: url(https://cdn.shopify.com/s/files/1/0618/8846/3067/products/[email protected]?v=1646131754);
background-repeat: no-repeat;
background-size: contain;
}
.fadein img {
    position:absolute;
    width: 500px;
    height: auto;

    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
  -webkit-animation-delay: 0s;
}
#f2 {
    -webkit-animation-delay: -4s;
}
#f3 {
    -webkit-animation-delay: -2s;
}