Simulating image "lightness" in CSS

Question

So I have some images on top of each other and I want to create a fading out effect for the ones behind.

However, opacity doesn't do the trick because you can see through the image behind it. A brightness filter doesn't work for me either because in addition to lightness it also increases saturation.

Essentially what I want is a white underlay or overlay for each image, combined with an opacity change for either the image or the overlay. I'm thinking this has a pseudoelement solution but I'm not confident I can get the positioning done correctly.

Here is a working example:

.spread-content {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     flex-flow: row wrap;
}
 .spread-content .spread-img {
     position: relative;
     display: flex;
     height: 25rem;
     justify-content: center;
     margin: 4rem 15rem 2rem 15rem;
     flex-shrink: 1;
}
 .spread-content .spread-img .img {
     position: absolute;
     transform: rotate(-8deg) translate(-15, 8%);
     transition: all 1s ease;
     width: 40vw;
     max-width: 15rem;
     filter: drop-shadow(0 2rem 1.5rem rgba(0, 0, 0, 0.1));
}
 .spread-content .spread-img:hover > #img-1 {
     transform: rotate(2deg) translateX(15%);
}
 .spread-content .spread-img:hover > #img-2 {
     transform: rotate(-3deg) translate(0%, 4%);
     opacity: 0.7;
}
 .spread-content .spread-img:hover > #img-3 {
     transform: rotate(-8deg) translate(-15%, 8%);
     opacity: 0.5;
}
 

<div class="spread-content">
  <div class="spread-img">
    <img id="img-3" class="img" src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80" alt="">
    <img id="img-2" class="img" src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80" alt="">
    <img id="img-1" class="img" src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80" alt="">
  </div>
</div>

Answer 1

A brightness filter doesn't work for me either because in addition to lightness it also increases saturation.

You can de-saturate image first and increase brightness after that. Using contrast(<below 100%>) or invert(<below 50%>) before brightness() have effect similar to semi-transparent white overlay:

p { background-image: url(https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80); background-repeat: no-repeat; background-size: contain; height: 5em; padding: 0 1em 0 4em; float: left; border: solid; margin: .1em; position: relative; max-width: 7em;  }
p::before { content: attr(style); }
p[style="/*overlay*/"]::after { content:''; position: absolute; inset: 0; background-color: rgba(255,255,255,.5)}

<p style="/*original*/">
<p style="filter: brightness(150%)">
<p style="/*overlay*/">
<p style="filter: contrast(30%)">
<p style="filter: contrast(30%) brightness(150%)">
<p style="filter: invert(35%) brightness(150%)">

Applied to your code:

.spread-content {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     flex-flow: row wrap;
}
 .spread-content .spread-img {
     position: relative;
     display: flex;
     height: 25rem;
     justify-content: center;
     margin: 4rem 15rem 2rem 15rem;
     flex-shrink: 1;
}
 .spread-content .spread-img .img {
     position: absolute;
     transition: all 1s ease;
     width: 40vw;
     max-width: 15rem;
     transform: rotate(-8deg) translate(-15%, 8%);
     filter: invert(0%) brightness(100%) drop-shadow(0 2rem 1.5rem rgba(0, 0, 0, 0.1));
}
 .spread-content .spread-img:hover > #img-1 {
     transform: rotate(2deg) translateX(15%);
}
 .spread-content .spread-img:hover > #img-2 {
     transform: rotate(-3deg) translate(0%, 4%);
     filter: invert(20%) brightness(120%) drop-shadow(0 2rem 1.5rem rgba(0, 0, 0, 0.1));
}
 .spread-content .spread-img:hover > #img-3 {
     transform: rotate(-8deg) translate(-15%, 8%);
     filter: invert(30%) brightness(130%) drop-shadow(0 2rem 1.5rem rgba(0, 0, 0, 0.1));
}

<div class="spread-content">
  <div class="spread-img">
    <img id="img-3" class="img" src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80" alt="">
    <img id="img-2" class="img" src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80" alt="">
    <img id="img-1" class="img" src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80" alt="">
  </div>
</div>