How to overrlay a gradient over an image

Asked Jul 21 '19 at 10:21

Active Jul 21 '19 at 10:23

Viewed 18 times

I am trying to get an overlay over the image to work

I am failing at CSS:

  <!DOCTYPE html>
    <html>
    
    <head>
    </head>
    <body>
    <style>
      .image-wrapper{
     position:relative;
     display:block;
      }
      .image-overlay:after {
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.2) 10px,
        rgba(0, 0, 0, 0.3) 10px,
        rgba(0, 0, 0, 0.3) 20px
      );
       }
     .module {
        background: white;
        border: 1px solid #ccc;
        margin: 3%;
      }
     .module h2 {
      padding: 1rem;
      margin: 0 0 0.5rem 0; 
     }
     .module p {
      padding: 0 1rem; 
     }
    </style>
    <div class="image-wrapper">
      <img height="200" width="200" src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/old_map_@2X.png"/>
      <div class="image-overlay"></div>
    </div>
    </body>
    
    
    </html>

Plunker

I would like the overlay to cover the whole image

edited Jul 21 '19 at 10:23

Temani Afif

245,468
26
309
415

asked Jul 21 '19 at 10:21

Jester

3,069
5
30
44

1

you need to add `content:""` to pseudo element – Temani Afif Jul 21 '19 at 10:23
2

you also need to use `inline-block` with the wrapper to cover only the image – Temani Afif Jul 21 '19 at 10:25

How to overrlay a gradient over an image

0 Answers0