Santiago Morales• 360
@Aleroms
Posted
Good job on the challenge! I recently submitted my own solution too and was wondering how you used the 'mixed-blend-mode' to get the overlay color?
1
Raink31• 340
@Raink31
Posted
@Aleroms Hey, thanks !
To use the "mixed-blend-mode", I placed a background color behind the photo with this code :
` .img-box{
position: relative;
} `
` .img-box::before{
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: hsl(277, 64%, 61%);
} `
And I applied this code on the photo :
` .img-box img{
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
} `
The multiply "mix-bland-mode" makes the violet background appear, and you can play with the opacity to bring out the black more or less :)
1
