fading-css-hero

Blended Islay heavily-peated sherry-bomb cask-strength malt.

Pour Dram

This is a css only background fader with 5 images. The difference between this one, and the "Fading-css-Hero-Fixed-Top" is that the "Fading-css-Hero" moves with the page. It has good browser support, and is fairly elegant.

HTML

<!--### fading-css-hero ###-->
<div id="fading-css-hero">
<div class="crossfade px2 py4 white center">
     <figure></figure>
      <figure></figure>
      <figure></figure>
      <figure></figure>
      <figure></figure>
  <h1 class="lg-h00 caps mt4 mb0 regular shadow-text pb3">fading-css-hero</h1>
  <h3 class="lg-h2 mb3 regular shadow-text">Blended Islay heavily-peated sherry-bomb cask-strength malt.</h3>
<a class="h3 regular btn btn-big btn-primary mb4" href="#">Pour Dram</a>
</div></div><!-- fading-css-hero -->

CSS

/*!======= fading-css-hero =========*/
/*!=== https://www.cssscript.com/css-only-crossfading-background-slideshow/ ===*/
#fading-css-hero{position:relative;top:0;right:0;left:0;height:70vh} /*==== adjust this height to suit ===*/
.crossfade > figure {padding: 0;margin: 0px;animation: imageAnimation 30s linear infinite 0s;backface-visibility: hidden;color: transparent;left: 0px;opacity: 0;position: absolute;top: 0px; width: 100%;z-index: -1;height: 100%;}
.crossfade > figure:nth-child(1){background-image: url('https://picsum.photos/1001/600/?random');} /*!=== imgages about 1000 x 600 ===*/
.crossfade > figure:nth-child(2){animation-delay: 6s;background-image: url('https://picsum.photos/1002/600/?random');}
.crossfade > figure:nth-child(3){animation-delay: 12s;background-image: url('https://picsum.photos/1003/600/?random');}
.crossfade > figure:nth-child(4){animation-delay: 18s;background-image: url('https://picsum.photos/1004/600/?random');}
.crossfade > figure:nth-child(5) {animation-delay: 24s;background-image: url('https://picsum.photos/1005/600/?random');}
@keyframes imageAnimation {0% {animation-timing-function: ease-in;opacity: 0;}8% {animation-timing-function: ease-out;opacity: 1;}17% {opacity: 1}25% {opacity: 0}100% {opacity: 0}}
@media (min-width:64em) {.crossfade > figure:nth-child(1), .crossfade > figure:nth-child(2),.crossfade > figure:nth-child(3),.crossfade > figure:nth-child(4),.crossfade > figure:nth-child(5) {background-size: cover;background-position:center;}}

JS

none

valid-html
valid-css