<div class="shirowani">
  <img src="https://raw.githubusercontent.com/Nomura0118/imgs/main/shirowani.webp" usemap="#ImageMap" width="756" height="248" alt="シロワニの画像" />
  <map name="ImageMap" class="shirowaniMap">
    <area shape="poly" coords="4,210,134,219,257,204,367,245,351,189,461,171,521,200,536,146,564,146,626,183,636,129,695,167,695,126,755,68,751,27,636,86,612,82,595,28,543,67,456,61,439,2,365,52,225,90,67,162,67,162" alt="シロワニの多角形" />
  </map>
  <p>ホバーされました</p>
</div>

.shirowani p {
  display: none;
}

/* map（多角形）がホバーされたら隣接するp要素を表示 */
.shirowani map:hover + p {
  display: block;
}