VueJS CSS animation not expanding outside of v-card/v-col

Issue

I'm currently trying to build a book collection and tried the make a notification icon with a circular expansion animation. I'm using Vue 3 with Vuetify and have multiple cards in a grid with rows/cols.

My current problem is, that the animation cuts off when reaching the card/col border. So I want for the animation to go over the borders.

<template>
  <v-card class="rounded-0 test" width="300px">
    <v-img
      :src="img"
      gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.8)"
      cover
    >
      <v-container class="fill-height" fluid>
        <v-row v-if="newestVols" class="align-self-start full-width">
          <v-spacer></v-spacer>
          <v-col cols="3">
            <v-btn
              class="icon info-icon"
              variant="plain"
              color="red"
              icon="mdi-exclamation-thick"
              :ripple="false"
            >
            </v-btn>
          </v-col>
        </v-row>
        <v-row class="align-self-end full-width">
          <v-col cols="12">
            <v-card-title
              class="text-white pointer"
              @click="dialog = true"
              style="cursor: pointer"
            >
              {{ title }}

              <v-dialog v-model="dialog" width="auto">
                <v-card>
                  <v-container fluid>
                    <v-row justify="center">
                      <v-col
                        v-for="vol in sortedArray"
                        :key="vol.id"
                        class="d-flex justify-center fill-height"
                      >
                        <BookCard
                          :title="title"
                          :cover="vol.cover"
                          :number="vol.number"
                          :id="vol.id"
                          :editionID="id"
                          :showRemoveButton="true"
                        />
                      </v-col>
                    </v-row>
                  </v-container>
                  <v-card-actions>
                    <v-btn color="primary" block @click="dialog = false"
                      >Close Dialog</v-btn
                    >
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </v-card-title>
          </v-col>
        </v-row>
      </v-container>
    </v-img>
  </v-card>
</template>

<script>
import BookCard from "./BookCard.vue";

export default {
  props: {
    img: {
      type: String,
    },
    title: {
      type: String,
    },
    volumes: {
      type: Array,
      default: [],
    },
    id: {
      type: Number,
    },
    volumes: {
      type: Array,
      default: [],
    },
  },
  components: {
    BookCard,
  },
  data: () => ({
    dialog: false,
  }),
  computed: {
    sortedArray() {
      return this.volumes.sort((a, b) => (a.number > b.number ? -1 : 1));
    },
    newestVols() {
      return ["test"];
    },
  },
};
</script>

<style>
.icon {
  font-size: 30px !important;
  opacity: 1 !important;
}

.full-width {
  width: 100%;
}

.pointer {
  cursor: pointer;
}

.info-icon i {
  animation: pulse 2s ease-out infinite;
  border-radius: 50% !important;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgb(255, 0, 0, 1), 0 0 0 0px rgba(255, 44, 44, 0.85);
  }
  100% {
    box-shadow: 0 0 0 15px rgba(255, 0, 0, 0), 0 0 0 30px rgba(255, 44, 44, 0);
  }
}
</style>

Solution

There is an overflow: hidden rule on the VCard and the VImg which you have to get around. One way to do it is through Vuetify's overflow-visible class:

  <v-card class="rounded-0 test overflow-visible" width="300px">
    <v-img
      :src="img"
      gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.8)"
      cover
      class="overflow-visible"
    >
      ...

Have a look at the playground

Answered By - Moritz Ringler