-1

I'm working on an app in PHP. There are some pictures displayed, and when hovering it, it displays a new image (which is in reality the same image but with a blue filter added manually).

The fact is, I don't want to display a new image with a blue filter, but I want to put the filter directly on the image when hovering it for not having to fetch a new image.

.home-container .theme1{
    background-size: cover;
    background: url('../img/myImage') no-repeat center;
}

.home-container .theme1{
    background-size: cover;
    background: url('../img/myImageWithBlueFilter') no-repeat center;
}

How can I display the same image with a blue filter, while not completely obliterate the colors of the image (with the filter option in css for exemple).

Thank you !

I searched for the answer on the internet.

Clemzouuu
  • 1
  • What have you tried? Did something not work? What are you having troubles with, hovering? Creating the "blue filter"? What did your internet search reveal? – brombeer Nov 24 '22 at 09:53

1 Answers1

0

You should try to use a rgb color, adding some opacity so that it doesn't cover the image. To add opacity you just need to add an other value, here's an example: rgb(255, 0, 0) this is classic red; rgb(255, 0, 0, 0.5) this is red with opacity value.

utenteciao utente
  • 1
  • 1