Landing page using Flexbox CSS

Community feedback

• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  Hello Alephy!

  Use the CSS "filter" property to set the color to the image. Here is a sample of how you can do it.

  .selector {
      filter: opacity(.6) drop-shadow(0 0 0 hsl(277, 64%, 61%));
  }
  

  Cheers!

  Marked as helpful

  0

  ---

  

  Alephy [ BR ]•80

  @alephy9Posted over 2 years ago

  @Enmanuel-Otero-Montano Thank you very much, I will note this method.

  1
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Alephy, congratulations for your solution!

  There's many ways to do the overlay effect in the image, you can play with the property opacity over div with the purple background to blend, or use filter, but the best way is mix-blend-mode.

  I saw that in your code you've used <figure> and imported the image directly to the css with background-image to reach this effect you'll have to import the image directly to the html with the <img> or <picture> tag and only then apply the mix-blend-mode making sure that the column/container background is purple in order to blend the photo + background.

  When you apply this changes to the html the code will be like this:

  img {
  mix-blend-mode: multiply;
  opacity: 0.8;}
  

  My recommendation is that you use picture in order to wrap both desktop and mobile image together and switch them without a need of media query for this change.

  Try that and say me if works for you!

  Hope this helps you and happy coding!

  ------------------------------------------------------------

  Agora que eu vi que você é brasileiro, irmão, é só inserir a imagem pelo html com <img> ou <picture> e colocar o código mix-blend-mode: multiply + opacity: 0.8; você puxou a imagem pelo css com o <figure> ai fazendo assim o efeito não se aplica, o ideal seria deletar o <figure> e inserir a imagem com picture ou img e meter o código.

  picture {
  mix-blend-mode: multiply;
  opacity: 0.8;}
  

  0

  ---

  

  Alephy [ BR ]•80

  @alephy9Posted over 2 years ago

  @correlucas Eu havia usado a tag picture com img, mas eu troquei pq eu achava que se eu colocasse a imagem pelo background-image eu conseguiria de alguma forma mudar a cor da imagem com algum color que seja.... kk eu testei tudo que foi código css com nome color pra ver se eu conseguia mudar a cor, não consegui e cabou que deixei a imagem no background-image... mas eu vou retornar com picture e testar essas ferramentas que você citou, obrigado de mais, eu já aprendi bastante aqui na frontendmentor

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @alephy9 boa, pelo background-image não tem como tem que ser por algum elemento de imagem dentro do html e colocando o mix-blend-mode no seletor do css

  Marked as helpful

  0