JSFiddle - React, Tailwind, and code Playground

HTML

<figure id="projectsvg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet" >
    //set your background image
<image width="1920" height="1080" xlink:href="http://placehold.it/1920x1080">
</image>
<g class="hover_group" opacity="0">
<a xlink:href="http://www.wooh.be/shop/mobilier/wooh-original-office-home/giroflex-353.html">
<text x="652" y="706.9" font-size="20">First zone</text>
<rect x="572" y="324.1" opacity="0.2" fill="#FFFFFF" width="264.6" height="387.8"></rect>
</a>
</g>
<g class="hover_group" opacity="0">
<a xlink:href="/shop/mobilier/wooh-original-office-home/giroflex-353.html">
<text x="1230.7" y="952" font-size="20">Second zone</text>
<rect x="1081.7" y="507" opacity="0.2" fill="#FFFFFF" width="390.2" height="450"></rect>
</a>
</g>
</svg>
</figure>

CSS

.hover_group:hover
    {
        opacity:1;
    }
    #projectsvg 
    { 
        position: relative;
        width: 100%; 
        padding-bottom: 77%;
        vertical-align: middle; 
        margin: 0; 
        overflow: hidden; 
    }
    #projectsvg svg 
    { 
        display: inline-block;
        position: absolute; 
        top: 0; 
        left: 0; 
    }