Add css gradient over image

by Luke Harby

HTML

<div class="gradient">
<img src="https://64.media.tumblr.com/c57e147b05adc04d293d6217feb92636/2d5415905bb8c547-1a/s1280x1920/64383224cb1311ede9e7778bb73716dfe4a0f5e5.jpg" alt="">
</div>

<img src="https://64.media.tumblr.com/c57e147b05adc04d293d6217feb92636/2d5415905bb8c547-1a/s1280x1920/64383224cb1311ede9e7778bb73716dfe4a0f5e5.jpg" alt="" class="img1">

<img src="https://64.media.tumblr.com/c57e147b05adc04d293d6217feb92636/2d5415905bb8c547-1a/s1280x1920/64383224cb1311ede9e7778bb73716dfe4a0f5e5.jpg" alt="" class="img2">

<img src="https://64.media.tumblr.com/c57e147b05adc04d293d6217feb92636/2d5415905bb8c547-1a/s1280x1920/64383224cb1311ede9e7778bb73716dfe4a0f5e5.jpg" alt="" class="img3">

CSS

img {
    width: 100%;
    min-height: 200px;
}

.gradient {
    display: inline-block;
    background:
       linear-gradient(
          0deg,
          rgba(255, 0, 0, 1) 0%,
          rgba(255, 255, 255, 0) 50%
       );
}

.gradient img {
   display: block;
   position: relative;
   z-index: -1;
}

.img1 {
    -webkit-mask-image:
       linear-gradient(
          to top,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.65) 100%
       );
}

.img2 {
   -webkit-mask-image:
       linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.5) 100%
       );
}

.img3 {
    position: relative;
}

.img3::after {
    position: absolute;
    background-color: red;
    z-index: 1;
}