JSFiddle - React, Tailwind, and code Playground

by Amit Kolambikar

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div class="container">
  <img src="//placehold.it/400" usemap="#map">
  <map name="map">
    <area class="area" shape="rect" coords="0, 0, 200, 200" href="">
  </map>
  <div class="overlay"></div>
</div>

SCSS

.container {
    position: relative;
    width: 400px;
    height: 400px;
  }
  
  map {
    position: relative;
    z-index: 1000;
  }
  
  .overlay {
    opacity: 0;
    position: absolute;
    z-index: 500;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  
  .container:hover .overlay {
    opacity: 1;
  }