<p>I'm trying to use the Vuetify component to achieve some v-img thumbnail effects without success. My image settings are as follows: </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>I have these arranged horizontally in a row and column and I'm trying to set it up so that when I go over each v-img, they will darken individually and a white solid v button will appear over Center, I will assign a link/text to it as well. Since the hover component seems to lack dimming properties, what is the best approach. </p>

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

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

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