Add overlay on v-img and center button on hover

Question

I'm trying to use the Vuetify component to achieve some v-img thumbnail effects without success. My image settings are 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 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.

Answer 1

I don't think you'll get this directly, but you don't need to do anything more to get the results you want.

Out of the box... Use the Hover component to trigger events and use slot (boolean) values ​​to toggle CSS classes.

template

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

customize... Then add some range styles. The following is just a simple example, but you can style it to your liking.

style

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

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

Example:https://codepen.io/alexpetergill/pen/NWBadjV

Documentation: https://vuetifyjs.com/en/components/hover/

API: https://vuetifyjs.com/en/api/v-hover/#slots