Ajouter une superposition sur v-img et un bouton central en survol

Question

J'essaie d'utiliser le composant Vuetify pour obtenir des effets de vignettes v-img sans succès. Mes paramètres d'image sont les suivants :

<v-row class="fill-height pa-5"
                   align-content="center"
                   justifier="centre">
                <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>

Je les ai disposés horizontalement dans une ligne et une colonne et j'essaie de le configurer de sorte que lorsque je passe en revue chaque image virtuelle, ils s'assombrissent individuellement et un bouton v blanc uni apparaît au centre, je lui attribuera également un lien/texte. Étant donné que le composant de survol semble manquer de propriétés de gradation, quelle est la meilleure approche.

Answer 1

Je ne pense pas que vous obtiendrez cela directement, mais vous n’avez rien d’autre à faire pour obtenir les résultats souhaités.

Prêt à l'emploi dès la sortie de la boîte... Utilisez le composant Hover pour déclencher des événements et utilisez les valeurs d'emplacement (booléennes) pour basculer les classes CSS.

modèle

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

Personnaliser... Ajoutez ensuite quelques styles de plage. Ce qui suit n'est qu'un exemple simple, mais vous pouvez le personnaliser à votre guise.

Style

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

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

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

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

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