How to add half transparent overlay on image and a text? - html

Question

what i would like to achieve
The image you ar seeing is what I would like to achieve.
What I did so far:
<div class="col">
<div class="square">
<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.

Answer 1

While there are a few ways to achieve this, I think the easiest would be as follows:
.imgContainer {
width: 100px;
height: 100px;
background-color: black;
}
.imgOverlay {
width: 100%;
height: 30px;
background-color: rgba(255,255,255,.5);
}
<div class="imgContainer">
<div class="imgOverlay">
<p>I'm some text!</p>
</div>
</div>
What I've done here is inserted another div element into the div containing the image. The imgOverlay class has a background color set to rgba(255,255,255,.5);. rgba is "Red Green Blue Alpha", with Alpha controlling the opacity of the background color. You can set the alpha value to anywhere between 0(transparent) to 1(opaque).
For your purposes, you can set the imgContainer element to have a background image in lieu of a background color. I hope this is helpful!

Answer 2

.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
}
<div class="col">
<div class="square">
<img src="images/img1.png" id="img1">
<p>text here</p>
</div>
</div>

Answer 3

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);
}