Vutify V-hover не распространяется на весь div. только изображение

Question

Итак, я настроил массив элементов div с изображениями на них, однако, когда я применяю к ним тег v-hover, эффект наведения срабатывает только при наведении курсора на изображение, а не на окружающий v-col. Кроме того, наложение охватывает только изображение, а не V-Col. Я попытался переместить тег v-hover, чтобы охватить v-col, но он пожаловался на слишком много дочерних элементов:

<template>
  <v-row class="mx-0" align="center" justify="center">
    <v-col cols="6" md="3" v-for="c in catImages" :key="c.id" :class="c.class" >
      <v-hover v-slot:default="{ hover }">
        <v-img :src="c.img" max-height="100%">
          {{ catImages.company }}
          <v-expand-transition>
            <div
              v-if="hover"
              class="transition-fast-in-fast-out black darken-2 v-card--reveal white--text text-center"
              style="height: 100%;"
            >
              <v-list dense flat color="black">
                <v-list-item-group class="py-0">
                  <v-list-item
                    v-for="(link, index) in c.links"
                    :key="index"
                    :href="link.url + '/' + index"
                    target="_blank"

                  >
                    <v-list-item-content>
                      <v-list-item-title class="white--text">{{ link.links }}</v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                </v-list-item-group>
              </v-list>
            </div>
          </v-expand-transition>
        </v-img>
      </v-hover>
    </v-col>
  </v-row>
</template>

Стиль:

.v-card--reveal {
  align-items: center;
  bottom: 0;
  justify-content: center;
  opacity: .9;
  position: absolute;
  width: 100%;
  height: 100%;
}