@correlucas
Posted
👾Hello Shiva, congratulations for your new solution!
Here's some tips to improve your photo:
To have your image purple with the same overlay effect, you need to use mix-blend-mode to make this color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector. And the best part is that you;ll have a code really more clean than the current code, see the difference":
BEFORE:
.card__img::before {
content: "";
inset: 0;
position: absolute;
background-color: var(--clr-primary-accent-light);
opacity: 50%;
}
AFTER
img {
mix-blend-mode: multiply;
opacity: 75%;}
Try to fix the image responsiveness display: blockand max-width: 100% and object-fit: cover to make the image auto-crop when resizing inside the column:
img {
display: block;
object-fit: cover;
max-width: 100%;
}
👋 I hope this helps you and happy coding!
@shivaprakash-sudo
Posted
@correlucas Hello, thank you for commenting on my solution. I've tried your code and it doesn't seem to have any effect on the output, especially the object-fit line. The mix-blend-mode line makes the image too dark, same as the background, not the purple accent like in the design.
@correlucas
Posted
@shivaprakash-sudo You need to use opacity: 75% to make the color blend with the background color of the layer, but if you need to use this effect with one element thats comes from the html as <img> or <picture> if is a pseudo-element or background-image this effects doenst work properly.
I applied these changes to my solution and you can check here how I did:
https://www.frontendmentor.io/solutions/stats-preview-card-vanilla-css-custom-design-text-animation-RfGBFlMpwK
@shivaprakash-sudo
Posted
@correlucas Tried that, but it didn't work. Also, your CSS file is minified and everything is in one line, so I'm not able to check your code properly.
