Design comparison
Solution retrospective
I couldn't in any way put a color on the image, how do I do that? otherwise I think the site turned out nice, if you can analyze the readability of my code or if you can cite something that can improve I will be very happy to read the comment.
Community feedback
- @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 helpful0@alephy9Posted over 2 years ago@Enmanuel-Otero-Montano Thank you very much, I will note this method.
1 - @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 usefilter
, but the best way ismix-blend-mode
.I saw that in your code you've used
<figure>
and imported the image directly to the css withbackground-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 themix-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@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@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 helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord