starts Preview

Community feedback

• 

  Adel•820

  @aliadelharrat

  Posted about 2 years ago

  Hello, congrats on completing this challenge

  I've made a codepen explaining how to add that purple effect on a image (there are probably many ways to do this, but this is what I like)

  .image-wrapper .overlay { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: purple;
  opacity: .5;
  }
  

  See my code here: Codepen

  02
• 

  Kofi Baafi Kwatia•480

  @WesSno

  Posted about 2 years ago

  Hello @00YellowLemon, To create a color overlay over the image, you can follow the steps below.

  1. Create an empty image <div> and give it a class like .img or .pic
  2. Next is to create an empty <div> within the image <div> where the color overlay will be inserted. Give it a class of your choice. Example: class = "overlay"
  3. In your css, select the image <div> with its class and give it a background-image with the image given in the designs. Background-repeat should be no-repeat. Background-position and size can be center/cover respectively.
  4. After that, select the overlay <div> and give it a background-color and height.

  Also, the image should be on the right side. If you put it on the right side and you want the image to come on top of the text during the media query, you can use: ****flex-direction: column-reverse; Hope my suggestion was helpful.

  00