JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigator">
<img tabindex="0" src="foo" usemap="#rolf">
<map name="rolf">
  <area shape="rect" coords="0,0,60,60" href="https://forum.selfhtml.org/cites/voting" title="Voting">
  <area shape="rect" coords="60,0,100,60" href="https://forum.selfhtml.org" title="Forum">
  <area shape="rect" coords="0,60,100,100" href="https://wiki.selfhtml.org" title="Wiki">
</map>
</div>

CSS

.navigator {
  background-color: #fff;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
.navigator img {
  width: 100%; height: 100%;
}
.navigator:hover {
  -webkit-transform:scale(2.0);
  transform:scale(2.0);
}