How to change background-color of the image when hover with css [closed]

Question

How to change background-color of the image when hover with CSS What I can use? Which is the best practice.?

I am working on project VueJS add vutify I have one component that have three cards grid system vutify.

When hover an image, I should to change background-color of the image. Here is my code, I have picked up two images online just for example but my image in project are black when hover we should to put a background-color as  red.

Here is my code: This what I have created about animation I don't understand very well, anyone can help with it. I want to achive exatle this thing when hover on image: [enter link description here][1] I want to achieve this when click hover image to take this background color as picture.[![enter image description here][2]][2] Thanks in advance.

.img {

      background: #FFB6C1;
      transition: background-color 2s ease-out 100ms
    }

    .img:hover {
      background-color: red;
    }

  <template>
 <v-container fluid> 
     <v-row  justify="center">
         <v-col cols="12" md="8">

       
         <section class="section-cards-product ">
               <v-row>
                 <v-col cols="12" md="4" class="pb-12"> 
                         <v-card   color="#201E1C" >
                             <v-img    src="https://cdn.vuetifyjs.com/images/cards/cooking.png" class="img"
                                   ></v-img>
                      
                                  
                             <v-card-actions class=" section-title-bottom" >
                                <p class="white--text mt-6 mb-6 ml-5 ">
                                     Test test
                                </p>

                                   
                            </v-card-actions>                              
                      </v-card>
                 </v-col>
               </v-row>
         </section>
         </v-col>
     </v-row>    
 </v-container>
</template>

Answer 1

You can use CSS Property filter to do so. The following code will make the image black-n-white when you hover over it. You can make the behaviour as you want.

Here is the code:

img:hover {
        filter: grayscale(1);
      }

 <div>
      <div class="carousel-image carousel-image-fachada" id="mapaFachada">
        <img
          src="https://html.com/wp-content/uploads/flamingo.webp"
          width="450"
          height="auto"
        />
      </div>
    </div>