Lazy Image CSS

lazy-image.scss

$fade-in: opacity 400ms ease-in;
$fade-out: opacity 400ms 150ms ease-out;

img[data-sizes="auto"] {
  display: block;
  width: 100%;
}

.lazyload,
.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 300ms;
}

.blur-up {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  transition: filter 400ms, -webkit-filter 400ms;
}

.blur-up.lazyloaded {
  -webkit-filter: blur(0);
  filter: blur(0);
}

.lazy__container {
  position: relative;
  height: 0;
  display: block;
  width: 100%;
  img, iframe, video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .fadeOut {
    opacity: 0;
    transition: opacity 0.4s ease-out;
  }
  .fadeIn {
    opacity: 1;
    transition: opacity 0.4s ease-in;
  }
  &--hover {
    img:first-of-type {
      opacity: 1;
      transition: $fade-out;
    }
    img:last-of-type {
      opacity: 0;
      transition: $fade-in;
    }
    &:hover {
      img:first-of-type {
        opacity: 0;
        transition: $fade-in;
      }
      img:last-of-type {
        opacity: 1;
        transition: $fade-out;
      }
    }
  }
}