@correlucas
Posted
๐พHi Quintin Latimore, congrats on completing this challenge!
I've just opened your live site and I can say that you did a great job putting everything together! There's some tips to improve your solution:
You can 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%;}
To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode
using the multiply
one.The mix-blend-mode CSS property sites how an element's content should blend with the content of the element's parent and the element's background.
Hereโs how you can add this to your img
selector:
img { mix-blend-mode: multiply; opacity: 84%;}
โ๏ธ I hope this helps you and happy coding!
Marked as helpful
@quintin156
Posted
@correlucas Thanks for the insight that's exactly what i was looking for