on mouseover show only current card hover effect

on mouseover show only current card hover effect. At the moment if my mouse goes to over card then shows every card effect.

How is this possible in VUE nuxtjs?

What Im trying to achieve is this if mouse goes on then it would start playing gif and if mouse goes off then it shows static image.

My code:

<div v-b-hover="handleHover" class="team-img">
  <img
    v-if="isHovered"
    :srcset="member.node.teamMemberFields.imageGif"
  />
  <img v-else :srcset="member.node.teamMemberFields.image.srcSet" />
</div>

Script code:

import gql from 'graphql-tag'
export default {
  data() {
    return {
      isHovered: false,
    }
  },
  methods: {
    handleHover(hovered) {
      this.isHovered = hovered
    },
  },
...

I’m unsure what your custom directive is doing - but I’m assuming that’s where the issue is.
You just need to toggle the state based on mouse entered and mouse leave.

<div
    class="team-img"
    @mouseover="isHovered = true"
    @mouseleave="isHovered = false"
>