JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<div id="sol">

</div>


<div id="sag">
<img id="image" src="http://localhost/test/cicekler.jpeg" width="100%">

<svg width="0" height="0">
  <mask id="mask">
    ...
  </mask>
</svg>
</div>

CSS

#image {
    mask: url(#mask);
    -webkit-mask: url(http://localhost/test/mask.svg) top left / cover;}
    
    #sol{
  
  height: 80px; 
   width: 120px;
  float:left;
  background-color:red;
  z-index:4;
  position:relative;
}


#sag {
   height: 0; 
   width: 80px;
  margin-left:-60px;
   float:left;
   z-index:5;
   position:relative;
   background-color:blue;
}

JavaScript

window.onresize = function(event) {
var w = window.innerWidth;
var solyukseklik = $("#image").height;
console.log (solyukseklik);
$("#sol, #sag").css({'background-color':'','width':(w/2)-8+'px'})
$("#sol").css({'height':solyukseklik+'px'})

}