How to apply a style to a part of an image?

Question

css

Task: when hovering over different elements of the image, make these parts transparent.
Initial data: only a picture in .png format.
HTML:

<img src="images/section.png" alt="" usemap="#Map">
          <map name="Map" id="Map">
            <area alt="" title="10" href="#" shape="poly" coords="463,105,115,156,34,123,35,79,81,64,319,27,382,21,462,52" />
            <!--[...]-->
          </map>

How, when hovering over this part, apply the style to this particular part?

Answer 1

All suggestions above work only if you need to remove an event from a part of the image, but you can apply styles to them only if you overlay SVG - simple shapes. But, if you need to make a piece of the picture transparent (for example, the effect of a disappearing wall), then the solution is this:
0. Cut the top picture (parts of which should disappear) into back images with a transparent background.
1. First put a photo pallet (what is behind the walls).
2. Then put a div with a bunch of images on top, which position: relative;creates a solid image through.
3. And then just apply to each of themimg:hover {opacity: 0}

Answer 2

there are such map / area, if they are still supported.