JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container_img">
      <p>
      this is a text 
      </p>
    </div>

CSS

.container_img{
   position:relative;
   border:1px solid red;
   margin-top:-14px;
   display: table; 
   margin-top:2px; 
   width: 709px; 
   height: 141px;     
   background-image: url("https://i.imgur.com/VBOZfaY.png");
   background-image: url("https://i.imgur.com/VBOZfaY.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

.container_img:hover{
 background-color: transparent;
 opacity:0.5;
}

p{
  position:absolute;
  left:50%;
  font-size:50px;
}