<template>
  <v-hover>
    <template v-slot="{ isHovering, props }">
      <v-card
        width="200"
        v-bind="props"
        variant="text"
        class="pa-0 cursor-pointer"
      >
        <v-img
          style="border-radius: 120px 40px 40px 40px"
          cover
          height="280"
          width="100%"
          class="mb-1"
          :class="isHovering ? 'slide' : ''"
          src="/team/aTeamMember_1.jpg"
        ></v-img>
        <v-card-title class="text-center pb-0">
          <h5>Brendon M</h5>
        </v-card-title>
        <v-card-subtitle class="text-center" style="opacity: 0.7s">
          <p
            class="text-primary font-weight-medium"
            :class="isHovering ? 'text-accent' : ''"
            style="transition: 1s"
          >
            CEO & Founder
          </p>
        </v-card-subtitle>
      </v-card>
    </template>
  </v-hover>
</template>

<script setup></script>

<style scoped>
.slide {
  transform: translateY(10px);
  transition: 0.8s;
}
</style>
