Img html tag with black overlay?

Question

Currently I have this img html

 <img id="modalImg" alt="img" src="/path">

How can I make this image with overlay background? something like this .background-color: rgba(0,0,0,0.2);

Example:

score 0 · Answer 1 · answered Jun 27 '20 at 12:09

I'm not sure if i get it correctly, but you can simply do this.

      <div class="img-container" style="position:relative;display:inline-block">
        <img id="modalImg" alt="img" src="https://via.placeholder.com/150">
        <span class="overlay" style="
            display:inline-block;
            position:absolute;
                  top:0px;left:0px;
            width:100%; height:100%;
            background-color: rgba(0,0,0,0.2);
         "></span>
      </div>

score -1 · Answer 2 · answered Jun 27 '20 at 11:57

-1

I don't totally get want you want to do, but I think by putting a div around the img and setting a padding could do what you want, something like these:

<div style="padding: 10px; background-color: rgba(0,0,0,0.2)">
    <img id="modalImg" alt="img" src="/path">
</div>

answered Jun 27 '20 at 11:57

Diogo Brito

147
5

That will create a shaded area **around** the image, not **overlaying** it. – Quentin Jun 27 '20 at 12:03
Not working, tried this but the div when I inspect element it, just created a small div since it has padding : 10px – Pablo Jun 27 '20 at 12:05
Yeah, sorry, didn't get it right – Diogo Brito Jun 27 '20 at 12:55

Img html tag with black overlay?

2 Answers2