what i would like to achieve

The image you ar seeing is what I would like to achieve.

What I did so far:

 <div >
        <div >
            <img src="images/img1.png" id="img1">
        </div>
       
    </div>

this is the css

.square{

    position:absolute;
    background-color:white;
    opacity:0.5;   
    height:200;   
    width:200px;    
   
}
#img1{
    width:200px;
    height: 200px;
}

Thanks for the responses received. I think I haven't been clear with my request. In the image I posted I would like to be able to have an image with a transparent overlay that doesn't cover all the image, but just the "header" part of the image. That's where I have been struggling.

CodePudding user response：

<div >
     <div >
         <img src="images/img1.png" id="img1">
         <p>text here</p>
     </div>
</div>





.square {
  position: relative;
  background-color: white;
  opacity: 0.5;
  height: 200;
  width: 200px;

}

#img1 {
  width: 200px;
  height: 200px;
}

p {
  position: absolute;
  top: 0px;
  left: 0
}

CodePudding user response：

You don't necessarily need positioning to create an opaque background, you could use a background color with an alpha value as well, (and remove the opacity: 0.5).

.square{
    background-color: rgba(255, 255, 255, 0.5);
}