starts Preview

Community feedback

• 

  Adel•820

  @Adel-HarratPosted over 1 year 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

  0

  ---

  

  Muhammad Fouad•60

  @Muhammad-1956Posted over 1 year ago

  Congratulations on completing the challenge! Keep up the great work and never stop pushing yourself. Now, regarding your question about adding a purple effect to an image:

  1.The mix-blend-mode property specifies how an element's content should blend with its direct parent background.

  .image {
  background-color: hsl(277, 64%, 61%);
  }
  .image img {
  mix-blend-mode: multiply;
  }
  

  Marked as helpful

  0

  

  Muhammad Fouad•60

  @Muhammad-1956Posted over 1 year ago

  @Muhammad-1956 And changing images based on the screen viewport, here's some guidance: 2.The @media rule, made it possible to define different style rules for different media types(viewports):

  .container{
  display: flex;
  flex-direction: row;
  }
  @media (max-width: 375px){
  .container{
  flex-direction: column
  }
  }
  

  0
• 

  Kofi Baafi Kwatia•310

  @WesSnoPosted over 1 year 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.

  0