JSFiddle - React, Tailwind, and code Playground

BG blue fade

by Emily Humphrey

HTML

<div class="image" style="background-image:...

SCSS

.image{
  position: relative;
  height: 400px;
  width: 600px;
  overflow: hidden;
  background-size: cover;
}
.fill{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 400px;
  width: 600px;
  background-size: cover;
  -webkit-filter: blur(10px);
  transition: .3s ease-out;
}
div:hover > .fill{
  opacity: 0;
}

JavaScript

setTimeout(function(){
  
  document.getElementsByTagName("body")[0].classList.add("load");
  
}, 2000)