Responsive page using CSS grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hey Gravit, congratulations for your solution!

  Answering your question:

  Use the flex property flex-direction: column-reverse; to have the image on the top.

  If you want to add the same effect of the design for the image overlaying it with purple there's a shortcut that is by using mix-blend-mode with the mode multiply and with an opacity around opacity: 82%. See the code below:

  img {
  mix-blend-mode: multiply;
  opacity: 82%;}
  

  Hope this helps, keep it up

  1