CREATING PANELED IMAGES

The look of these panels is accomplished with a mixture of background-blend-mode, and transparent stripes.

I used background-blend-mode to combine a background-color and a background image set to a grayscale photo of one of my dogs. There are a lot of different modes to choose from, but I mostly stuck to a background-blend-mode of darken, lighten, or hard-light.

The paneled look was created by alternating transparent and black stripes over my background image. Stripes can be made by using a repeating-linear-gradient. I used CSS-grid to place a div with my stripes overtop of my dog background, but a pseudo-element would have also done the trick. Below is my code for the first dog photo with red vertical panels. Everything else is just a variation of this.

HTML

<section>
  <div class="bebop-grid1">
    <div class="black-vertical"></div>
    <div class="black-text">COWBOY BEBOP</div>
  </div>
  <div class="role-name right">
    <h1>GOOD GIRL</h1>
    <h2>BEA BEA</h2>
  </div>
</section>

CSS

.bebop-grid1 {
  display: grid;
  container-type: inline-size;
  background: url(/assets/photos/bea-snow.jpg);
  background-color: var(--clr-red);
  background-size: cover;
  background-position: 25% 80%;
  background-blend-mode: darken;
  width: 100%;
  height: clamp(150px, 50vw, 600px);
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
}
      
/*stripes mimicking panels*/
.black-vertical {
  grid-column: 1/-1;
  grid-row: 1/-1;
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent 13cqi,
    var(--clr-background) 13cqi,
    var(--clr-background) 14.5cqi
  );
  z-index: 10;
}
        
.black-text {
  grid-column: 1/-1;
  grid-row: 4/-1;
  align-self: end;
  color: var(--clr-background);
  font-size: 10cqi;
  font-weight: 800;
}