Stat card

Community feedback

• 

  Samoina•240

  @samoinaPosted over 1 year ago

  The Purple color over the image is called an overlay. Here's how I went about it.

  1. Place the image in a parent container, say class main__picture. PS: I used the <picture> element to show different images depending on the screen size.
  2. We get to use the ::before pseudoselector. This allows us to create an 'extra layer' on top of the existing image to give it that purple color, hence why it is called an overlay. Using ::before means this 'layer' is added as though it was a child of the parent container, but just before my picture element.
  3. We position the parent container relative, and the overlay absolute so that it covers the image entirely.
  4. We then add the background color provided for this challenge (hsl(277, 64%, 61%)) .
  5. There's a blend mode that CSS allows to combine the colors of the overlay with the white of the image. so we use the property mix-blend-mode and set it to multiply..
  6. Lastly we set opacity to determine how much of the white shows through the overlay. Here's a code snippet to illustrate this:

  <picture class="main__picture">
  <source media="(min-width: 375px)" srcset="images/image-header-desktop.jpg" sizes="">
  <img src="images/image-header-mobile.jpg" alt="background image">
  </picture>
  

  /* Create the purple overlay on CSS*/
  .main__picture {
  position: relative;
  }
  
  .main__picture ::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--soft-violet);
  mix-blend-mode: multiply;
  opacity: 0.5;
  }
  

  This worked for me and I hope you find it helpful. All the best Vivek! Happy Coding

  Marked as helpful

  1

  ---

  

  Vivek Upadhyay•90

  @vivek33upPosted over 1 year ago

  Thankyou so much!! @samoina

  0

  

  Samoina•240

  @samoinaPosted over 1 year ago

  You're welcome @vivek33up :)

  0