Adding image overlay on hover effect

image_overlay_html_css.md

<div class="img-upload-placeholder relative">
  <img class="opacity-05"/>
  <input class="absolute opacity-0 z-50 w-full h-full cursor-pointer"/>
</div>

Imagine these classes of tailwind utility classes as h-full means height: 100% and so on...

.img-upload-placeholder {
  border-radius: 50%;
  cursor: pointer;
}

.img-upload-placeholder:hover {
  transition: all 0.2s ease-in-out;
  background: rgba(0, 0, 0, 0.8);
}