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

Question

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.

Does this answer your question? [How to position text over an image in css](https://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css) — ViaTech, Dec 13 '21 at 13:32

score 0 · Accepted Answer · answered Dec 14 '21 at 14:12

0

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!

answered Dec 14 '21 at 14:12

hellobobbysouza

175
1
7

it may be worthwhile reading about the ::before & ::after pseudo-elements as well. These are powerful and versatile tools that you can do a lot of interesting things with, including solving your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/::before https://developer.mozilla.org/en-US/docs/Web/CSS/::after – hellobobbysouza Dec 14 '21 at 14:17
thanks for mentioning these resources and for the answer given. – Dec 14 '21 at 15:02
you're welcome! the mozilla dev site is a great source of information. I'd also recommend the Free Code Camps certification course. Good luck and keep at it! – hellobobbysouza Dec 14 '21 at 19:39

score -1 · Answer 2 · edited Dec 14 '21 at 13:56

-1

.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>

edited Dec 14 '21 at 13:56

Sfili_81

2,377
8
27
36

answered Dec 13 '21 at 13:36

Hatam Jafarov

45
4

1

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). – Sfili_81 Dec 13 '21 at 13:48
@Sfili_81 is my question still unclear? – Dec 13 '21 at 14:17
no, the answer has no explanation – Sfili_81 Dec 13 '21 at 14:19

score -2 · Answer 3 · answered Dec 13 '21 at 13:37

-2

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

answered Dec 13 '21 at 13:37

Jan Drewniak

1,316
15
18

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

3 Answers3