Adding overlay over v-img on hover and centering a button - vue.js

Question

I am trying to use Vuetify components to achieve an effect on some v-img thumbnails and I am failing to do so. My images are setup as follows:
<v-row class="fill-height pa-5"
align-content="center"
justify="center">
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc1"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc2"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc3"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc4"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
</v-row>
I have these aligned horizontally in a row with columns and I am trying to have it so that when i over over each v-img they dim separately and a white solid v-button will appear in the center which I will assign a link/text too. What is the best way to do this as the hover component seems to lack dimming properties.

Answer 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%);
}
Example: https://codepen.io/alexpetergill/pen/NWBadjV
Docs: https://vuetifyjs.com/en/components/hover/
API: https://vuetifyjs.com/en/api/v-hover/#slots