JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <span class="img"></span>
</div>

CSS

/* .container needs to be same size at img */
     .container {width:400px; height:400px; background:#fff; opacity:0.5; margin:0 auto; position:relative; z-index:1;}
     /* .container:before 1/4 img width, 1/2 img height, left 0, top 1/4 img, */
     .container:before   {content:""; display:block; width:100px; height:200px; position:absolute; left:0px; top:100px; z-index:15; background:#0f0; opacity:0.5;}
     /* .container:before 1/4 img width, 1/2 img height, left 3/4 img, top 1/4 img */
     .container:after   {content:""; display:block; width:100px; height:200px; position:absolute; left:300px; top:100px; z-index:15; background:#0f0; opacity:0.5;}
     /* .img would be your actual img at full size */
     .img {display:block; width:400px; height:400px; position:absolute; z-index:10; background:#f00;}
     /* .img:before same width as img, 1/4 height, top 0, left 0 */
     .img:before   {content:""; display:block; width:400px; height:100px; position:absolute; left:0px; top:0px; z-index:15; background:#00f; opacity:0.5;}
     /* .img:after same width as img, 1/4 height, top 3/4 img height, left 0 */
     .img:after   {content:""; display:block; width:400px; height:100px; position:absolute; left:0px; top:300px; z-index:15; background:#00f; opacity:0.5;}