JSFiddle - React, Tailwind, and code Playground

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 shape="rect" coords="0, 0, 200, 200" href="">
    </map>
    <div class="overlay"></div>
</div>

CSS

.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);
  }

  .overlay.active {
      opacity: 1;
  }

JavaScript

$('areas').hover(
        function() {
            var e = $(this);
            $('.overlay').addClass('active');
            consoloe.log("enter");
          },
        function() {
            $('.overlay').removeClass('active');
            consoloe.log("enter");
        }
    );