@correlucas
Posted
Hello Lisa, congratulations for your solution!
Answering your question:
A quick way to reach the same result or better for the image color is just applying mix-blend-mode: multiply
and manage the color blend with the opacity values as opacity: 82%
in the img selector or the div you've the photo. Note that this blend effect works only if you import the image as a <picture>
or <img>
to make the color blend with the element under it.
Remove all settings you've used to make the color in the effect, like the color and the opacity you've changed, add the purple color to be the background on the container:
@media (min-width: 1280px)
.containter {
display: grid;
grid-template-columns: 1fr 1fr;
width: 90%;
max-width: 1200px;
background-color: hsl(277, 64%, 61%);
}
Add the mix-blend-mode
to the img selector:
img {
mix-blend-mode: multiply;
opacity: 82%;
}
Hope this helps, happy coding!