@Adel-Harrat
Posted
Hello, congrats on completing this challenge
I've made a codepen explaining how to add that purple effect on a image (there are probably many ways to do this, but this is what I like)
.image-wrapper .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: purple;
opacity: .5;
}
See my code here: Codepen
@Muhammad-1956
Posted
Congratulations on completing the challenge! Keep up the great work and never stop pushing yourself. Now, regarding your question about adding a purple effect to an image:
1.The mix-blend-mode property specifies how an element's content should blend with its direct parent background.
.image {
background-color: hsl(277, 64%, 61%);
}
.image img {
mix-blend-mode: multiply;
}
Marked as helpful
@Muhammad-1956
Posted
@Muhammad-1956 And changing images based on the screen viewport, here's some guidance: 2.The @media rule, made it possible to define different style rules for different media types(viewports):
.container{
display: flex;
flex-direction: row;
}
@media (max-width: 375px){
.container{
flex-direction: column
}
}
