How to change image in card on hover dynamically in Vue js? - html

Question

I am trying to add 2 images in the card on hover in Vue.
When I hover over the card I want a different image and if I remove hovering it should different.
Here is my HTML:
<div class="services">
<h1>Our Services</h1>
<div class="container">
<div
v-for="service in services"
:key="service.title"
#mouseover="isMouseOver = !isMouseOver"
class="card"
:style="
isMouseOver
? 'background-image:' + service.icon + ';'
: 'background-image:' + service.iconGlow + ';'
"
>
<div class="face face1">
<div class="content">
<h3>{{ service.title }}</h3>
</div>
</div>
<div class="face face2">
<div class="content">
<p>
{{ service.description }}
</p>
Read More
</div>
</div>
</div>
</div>
</div>
Here is my script code:
<script>
export default {
data() {
return {
isMouseOver: true,
services: [
{
icon: require("#/assets/icons/services/webIcon.svg"),
iconGlow: require("#/assets/icons/services/WebLogoGlow.svg"),
title: "Web Development",
description:
"lorem ipsum lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.",
},
{
icon: require("#/assets/icons/services/AppIcon.svg"),
iconGlow: require("#/assets/icons/services/AppIconGlow.svg"),
title: "Mobile Application Development",
description:
"lorem ipsum lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.",
},
{
icon: require("#/assets/icons/services/Cross.svg"),
iconGlow: require("#/assets/icons/services/CrossLogo2.svg"),
title: "Computer Application Development",
description:
"lorem ipsum lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.",
},
],
};
},
};
</script>
Here is my CSS:
.container .card .face.face1 {
position: relative;
background: #333;
/* display: flex; */
justify-content: center;
align-items: center;
z-index: 1;
transform: translateY(100px);
/* background-image: url("../assets/icons/services/WebLogoGlow.svg"); */
background-size: 30%;
background-repeat: no-repeat;
background-position: center;
}
.container .card:hover .face.face1 {
background: #9376cf;
transform: translateY(0);
/* background-image: url("../assets/icons/services/webIcon.svg"); */
background-size: 30%;
background-repeat: no-repeat;
background-position: center;
}
I want these background images in CSS to be dynamic. How can I do that?