Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive stats page using flex and grid

@mussino

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everybody! How can I change the color on the picture? I don't know how to do that! I try to apply filter with css but didn't work. Thanks in advance

Community feedback

Raza Abbas 790

@RazaAbbas62

Posted

Hi, To dynamically change the color of an image on a webpage, use CSS to apply a background color and blend mode. This doesn't alter the image's pixels but overlays it with the desired color. If you need to modify pixel colors, consider using image editing tools or server-side processing.

.colored-image {
            background-image: url('your-image.jpg'); /* Replace with the path to your image */
            background-size: cover;
            width: 300px; /* Adjust the width as needed */
            height: 200px; /* Adjust the height as needed */
            background-color: #ff0000; /* Set the desired color */
            background-blend-mode: multiply; /* Experiment with different blend modes */
        }`

You can also use pseudo-classes to achieve the same effect.

Happy Coding :)

Marked as helpful

1

@mussino

Posted

Thanks I will try this!!!@FazeenIjaz

1

@Zayacode96

Posted

hey skalex how are you. I see you were wondering on how to apply the color to the image. ive recently done this same project and you visit my code on my challenge youll see the code i used on mine. but first what you want to do before anything is wrap your img tag in a div. and give it a class of img-container.

1

@mussino

Posted

Thanks I will check right now!!!@Zayacode96

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord