JSFiddle - React, Tailwind, and code Playground

by Bilal AFSAR

HTML

<div id="slideshow">
  <div>
    <img src="https://c2.staticflickr.com/4/3559/3446613250_8569b7d582.jpg">
    <div class="blur">
      <img src="https://c2.staticflickr.com/4/3559/3446613250_8569b7d582.jpg">
    </div>
  </div>

  <div>
    <img src="https://c1.staticflickr.com/9/8390/8572035019_0577667f3d.jpg">
    <div class="blur">
      <img src="https://c1.staticflickr.com/9/8390/8572035019_0577667f3d.jpg">
    </div>
  </div>
  <div>
    <img src="https://c2.staticflickr.com/6/5582/15049353751_d69ac63ce5.jpg">
    <div class="blur">
      <img src="https://c2.staticflickr.com/6/5582/15049353751_d69ac63ce5.jpg">
    </div>
  </div>

</div>

CSS

#slideshow {
  margin: 0 auto;
  position: relative;
}

#slideshow .blur {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  animation: slideUp 1s both linear;
  transform: translate3d(0, 0, 0);
  animation-delay: 1s;
  overflow: hidden;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

@keyframes slideUp {
  0% {
    max-height: 100%
  }

  100% {
    max-height: 0px
  }
}

JavaScript

// https://webdesign.tutsplus.com/tutorials/how-to-create-a-frosted-glass-effect-in-css--cms-32535

// https://css-tricks.com/making-a-realistic-glass-effect-with-svg/

// https://css-tricks.com/frosting-glass-css-filters/

// https://css-tricks.com/fun-with-blurred-text/



$("#slideshow > div:gt(0)").hide();
setInterval(function() {
  $('#slideshow > div:first')
    .hide()
    .next()
    .show()
    .end()
    .appendTo('#slideshow');
}, 4000);