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