JSFiddle - React, Tailwind, and code Playground

by trixta

HTML

<script src="https://afarkas.github.io/lazysizes/plugins/respimg/ls.respimg.min.js"></script>
<script src="https://afarkas.github.io/lazysizes/plugins/parent-fit/ls.parent-fit.min.js"></script>
<script src="https://afarkas.github.io/lazysizes/plugins/object-fit/ls.object-fit.min.js"></script>

<script src="https://afarkas.github.io/lazysizes/plugins/blur-up/ls.blur-up.min.js"></script>
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>


<div class="wrapper">
  <p>
    Demo for the <a href="https://github.com/aFarkas/lazysizes/tree/master/plugins/blur-up" target="_blank">lazysizes blur up plugin</a>.
  </p>

  <div class="mediabox">
    <img class="mediabox-img lazyload" data-srcset="https://picsum.photos/400/600?image=1074 600w 400h,
				https://picsum.photos/800/1200?image=1074 1200w" data-lowsrc="https://picsum.photos/200/300?image=1074" data-sizes="auto" />
  </div>

  <div class="mediabox">
    <img class="mediabox-img lazyload" data-srcset="https://picsum.photos/400/600?image=1078 600w 400h,
				https://picsum.photos/800/1200?image=1078 1200w" data-lowsrc="https://picsum.photos/200/300?image=1078" data-sizes="auto" />
  </div>

  <div class="mediabox">
    <img class="mediabox-img lazyload" data-srcset="https://picsum.photos/400/600?image=1072 600w 400h,
				https://picsum.photos/800/1200?image=1072 1200w" data-lowsrc="https://picsum.photos/200/300?image=1072" data-sizes="auto" />
  </div>

  <div class="mediabox" data-expand="-20">
    <img class="mediabox-img lazyload" data-srcset="https://picsum.photos/400/600?image=1070 600w 400h,
				https://picsum.photos/800/1200?image=1070 1200w" data-lowsrc="https://picsum.photos/200/300?image=1070" data-sizes="auto" />
  </div>

  <div class="mediabox" data-expand="-20">
    <img class="mediabox-img lazyload" data-srcset="https://picsum.photos/400/600?image=1051 600w 400h,
				https://picsum.photos/800/1200?image=1051 1200w" data-lowsrc="https://picsum.photos/200/300?image=1051"...

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.wrapper {
  margin: auto;
  width: 80%;
  min-width: 320px;
  max-width: 900px;
}

.mediabox-img.ls-blur-up-is-loading,
.mediabox-img.lazyload:not([src]) {
  visibility: hidden;
}

.mediabox {
  position: relative;
  display: block;
  height: 0;
  width: 100%;
  padding-bottom: 66.6667%;
}

.ls-blur-up-img,
.mediabox-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  font-family: "blur-up: always", "object-fit: cover";
  object-fit: cover;
}

.ls-blur-up-img {
  filter: blur(10px);
  opacity: 1;
  transition: opacity 1000ms, filter 1500ms;
}

.ls-blur-up-img.ls-inview.ls-original-loaded {
  opacity: 0;
  filter: blur(5px);
}