Samoina• 220
@samoina
Posted
The Purple color over the image is called an overlay. Here's how I went about it.
- Place the image in a parent container, say class
main__picture
. PS: I used the <picture> element to show different images depending on the screen size. - We get to use the
::before
pseudoselector. This allows us to create an 'extra layer' on top of the existing image to give it that purple color, hence why it is called an overlay. Using::before
means this 'layer' is added as though it was a child of the parent container, but just before my picture element. - We position the parent container relative, and the overlay absolute so that it covers the image entirely.
- We then add the background color provided for this challenge (
hsl(277, 64%, 61%
)) . - There's a blend mode that CSS allows to combine the colors of the overlay with the white of the image. so we use the property
mix-blend-mode
and set it to multiply.. - Lastly we set opacity to determine how much of the white shows through the overlay. Here's a code snippet to illustrate this:
<picture class="main__picture">
<source media="(min-width: 375px)" srcset="images/image-header-desktop.jpg" sizes="">
<img src="images/image-header-mobile.jpg" alt="background image">
</picture>
/* Create the purple overlay on CSS*/
.main__picture {
position: relative;
}
.main__picture ::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--soft-violet);
mix-blend-mode: multiply;
opacity: 0.5;
}
This worked for me and I hope you find it helpful. All the best Vivek! Happy Coding
Marked as helpful
1
Vivek Upadhyay• 90
@vivek33up
Posted
Thankyou so much!! @samoina
0
Samoina• 220
@samoina
Posted
You're welcome @vivek33up :)
0