JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="imageContainer">
  <img class="imageSource" />
  <button>Click</button>
  <div class="imageOverlay">
    <span class="loader">Loading...</span>
  </div>
</div>

CSS

.imageContainer {
  position: relative;
}

.imageSource {
  width: 400px;
  height: 400px;
}

.imageContainer.hover .imageOverlay {
  display: block;
}

.imageOverlay {
  display: none;
  background-color: rgba(0, 0, 0, 0.2);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

JavaScript

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.imageContainer').classList.add('hover');

  setTimeout(() => {
    alert('inside timeout');
    document.querySelector('.imageContainer').classList.remove('hover');
  }, 5000);
})