[Vuejs]-Adding overlay over v-img on hover and centering a button

1👍

✅

I don’t think you are going to get this straight out the box but you don’t need to do much more to get the result you want.

Out-the-box…
Use the Hover component to trigger an event and use the slot (boolean) value to toggle CSS class(es).

Template

<v-hover v-slot="{ hover }">
  <v-card :class="{ 'on-hover': hover }">
    // ...
  </v-card>
</v-hover>

Custom…
Then add some scoped styles. The following is just a quick example but you can style however you like.

Styles

.v-image {
  transition: filter .4s ease-in-out;
}

.v-card:hover .v-image {
  filter: brightness(25%);
}