JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<div>


<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">
      <a xlink:href="http://www.wooh.be/shop/mobilier/wooh-original-office-home/giroflex-353.html">

        <rect x="572" y="324.1" opacity="0.2" fill="#FFFFFF" width="264.6" height="387.8"></rect>
      </a>
    </g>
    <g class="hover_group">
      <a xlink:href="/shop/mobilier/wooh-original-office-home/giroflex-353.html">

        <rect x="1081.7" y="507" opacity="0.2" fill="#FFFFFF" width="390.2" height="450"></rect>
      </a>
    </g>
  </svg>
</figure>
</div>

CSS

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