<p>Saya cuba menggunakan komponen Vuetify untuk mencapai beberapa kesan lakaran kecil v-img tanpa berjaya. Tetapan imej saya adalah seperti berikut: </p> <pre class="brush:php;toolbar:false;"><v-row class="isi-tinggi pa-5" align-content="tengah" justify="center"> <v-col class="teks-sari kata-1 pusat teks" cols="12" sm="3"> <v-kad> <v-img :src="item.docs.doc1" nisbah aspek=".77"></v-img> </v-kad> </v-col> <v-col class="teks-sari kata-1 pusat teks" cols="12" sm="3"> <v-kad> <v-img :src="item.docs.doc2" nisbah aspek=".77"></v-img> </v-kad> </v-col> <v-col class="teks-sari kata-1 pusat teks" cols="12" sm="3"> <v-kad> <v-img :src="item.docs.doc3" nisbah aspek=".77"></v-img> </v-kad> </v-col> <v-col class="teks-sari kata-1 pusat teks" cols="12" sm="3"> <v-kad> <v-img :src="item.docs.doc4" nisbah aspek=".77"></v-img> </v-card> </v-col> </v-row></pre> <p>Saya mempunyai ini disusun secara melintang dalam satu baris dan lajur dan saya cuba menyediakannya supaya apabila saya menyemak setiap v-img, ia akan menjadi gelap secara individu dan butang v pepejal putih akan muncul di atas Pusat, saya akan memberikan pautan/teks kepadanya juga. Memandangkan komponen hover nampaknya tidak mempunyai sifat peredupan, apakah pendekatan terbaik. </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%);
}