@AtulKumar0001
Posted
Hey @Ritesh-Virulkar, To do so, add the class image-2 (or change the name, but then you must also change the CSS selector name provided below) to the div where you have placed your desktop header.jpg, and then apply this after adding the class.
.image-2{
width: 50%;
position: relative;
background-color: hsl(277, 64%, 61%);
opacity: 1;
}
After that, add another class to your img selector -> img (you can change this as well) and apply this style.
.img {
display: block;
object-fit: cover;
min-width: 100%;
opacity: .75;
mix-blend-mode: multiply;
}
Marked as helpful
@AliMahmoud21
Posted
@AtulKumar0001 There're many ways to do it, but this is the first time that I know the property "background-blend-mode", I will check it later, Also you can do it using "Psuedo Elements Before And After". It's an easy way, especially for beginners...
@AtulKumar0001
Posted
@AliMahmoud21 Yes, you are correct; you can do this with the after and before pseudo elements as well. It's just that was one of the methods.
