Cómo cambiar el color de fondo de la imagen cuando se desplaza con CSS ¿Qué puedo usar? ¿Cuál es la mejor práctica?

Estoy trabajando en el proyecto VueJS add vutify. Tengo un componente que tiene un sistema de cuadrícula de tres tarjetas vutify.

Al pasar el mouse sobre una imagen, debo cambiar el color de fondo de la imagen. Aquí está mi código, recogí dos imágenes en línea solo por ejemplo, pero mi imagen en el proyecto es negra cuando pasamos el mouse, debemos poner un color de fondo como rojo.

Aquí está mi código: esto es lo que he creado sobre la animación que no entiendo muy bien, cualquiera puede ayudar con eso. Quiero lograr esto cuando pase el cursor sobre la imagen: [ingrese la descripción del enlace aquí][1] Quiero lograr esto cuando haga clic en la imagen para tomar este color de fondo como imagen.[![ingrese la descripción de la imagen aquí][2]] [2] Gracias de antemano.

 .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>