JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

<img class="kuva" src="https://thumbs.dreamstime.com/z/online-robber-17098197.jpg" >
<div id="left"></div>
<div id="right"></div>
</div>

CSS

#container {
  position: relative;
  display: inline-block;
}

.kuva {
  width: 300px;
  background-color: "green";
}

#left {
  /*background: rgba(100, 0, 0, 0.5);*/
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
}

#right {
  /*background: rgba(0, 0, 255, 0.5);*/
  position: absolute;
  height: 100%;
  width: 50%;
  left: 50%;
  top: 0;
}

#left:hover::after {
  content: "Vasemmalta";
  font-size: 30px;
}

#right:hover::after {
  content: "Oikealta";
  font-size: 30px;
}