Adding overlay over v-img on hover and centering a button-CodePudding

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 
                   align-content="center"
                   justify="center">
                <v-col 
                       cols="12"
                       sm="3">
                    <v-card>
                        <v-img :src="item.docs.doc1"
                               aspect-ratio=".77"></v-img>
                    </v-card>
                </v-col>
                <v-col 
                       cols="12"
                       sm="3">
                    <v-card>
                        <v-img :src="item.docs.doc2"
                               aspect-ratio=".77"></v-img>
                    </v-card>
                </v-col>
                <v-col 
                       cols="12"
                       sm="3">
                    <v-card>
                        <v-img :src="item.docs.doc3"
                               aspect-ratio=".77"></v-img>
                    </v-card>
                </v-col>
                <v-col 
                       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.

CodePudding user response：

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 :>
    // ...
  </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/84c25f43cd6365a6d2fac91696f9e624

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

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