image map with a text appear when mouse hover on link

Site URL: http://www.fabionlus.it

hi everyone

my site is www.fabionlus.it

i am not a good web designer...sorry 🙄

in the trial page www.fabionlus.it/organigramma-1 :  when the mouse hover every link (any color is a link) in addition to the change of opacity, I would like a text to appear with the name of the link page.

I don't Know what is the solution...if I modify the <style> block ? I don't know

This is my code:

<style>
svg|a {
opacity: 0;
fill: #fff;
}

svg|a:hover, svg|a:active {
  opacity: 0.3;
  fill: #f80000;
}
</style>

<style>

  .image-overlay-wrap {
  
    display: inline-block; /* shrinks container to image size */
    fill: transparent;
    position: relative;
    
    }
    
  .image-overlay-wrap img { /* optional, for responsiveness */
  
    display: block;
    height: auto;
    max-width: 100%;
    
    }
    
  .image-overlay-wrap svg {
  
    left: 0;
    position: absolute;
    top: 0;
    
    }
    
  </style>

<div class="image-overlay-wrap">

  <img src="https://images.squarespace-cdn.com/content/v1/57271dad45bf21105b665dc4/1610295512434-SL4KN5NK943YPQ0QA143/ke17ZwdGBToddI8pDm48kNiEM88mrzHRsd1mQ3bxVct7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0topjEaZcWjtmMYdCWL4dkGbxs35J-ZjFa9s1e3LsxrX8g4qcOj2k2AL08mW_Htcgg/logo+2021.PNG" />
  
  <svg viewBox="0 0 1000 1000">
  
    <a alt="Home" target="_top" title="Home" xlink:href="http://www.fabionlus.it/home">
    
     <polygon points="227,148,227,202,233,247,193,344,198,475,216,519,265,587,326,629,425,661,429,656,332,583,275,473,272,339,297,275,336,250,357,211,445,183,547,187,510,158,437,147,330,145,288,114,257,114,241,127" />
      
      </a>
    
    <a alt="Chi Siamo" target="_top" title="Chi Siamo" xlink:href="http://www.fabionlus.it/la-mia-storia-3">
    
     <polygon points="335,96,436,65,523,62,607,91,676,51,726,54,751,76,762,116,757,153,741,204,791,292,795,386,772,469,723,555,658,621,569,658,652,582,707,492,730,380,708,284,682,245,647,244,612,210,600,160,547,115,455,91" />
      
      </a>
    </svg>
    
  </div>

Thank you very much for the answers

the top would be if at the click there was an animation of the clicked image, such as a gif before going to the link