<p>Ich versuche, die Vuetify-Komponente zu verwenden, um einige V-IMG-Thumbnail-Effekte zu erzielen, ohne Erfolg. Meine Bildeinstellungen sind wie folgt: </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>Ich habe diese horizontal in einer Zeile und einer Spalte angeordnet und versuche es so einzurichten, dass sie beim Durchgehen jedes V-Bilds einzeln abgedunkelt werden und eine weiße, durchgezogene V-Schaltfläche über Mitte, I erscheint wird ihm auch einen Link/Text zuweisen. Da es der Hover-Komponente offenbar an Dimmeigenschaften mangelt, stellt sich die Frage, was der beste Ansatz ist. </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%);
}