Tambahkan tindanan pada v-img dan butang tengah pada hover

Question

Saya cuba menggunakan komponen Vuetify untuk mencapai beberapa kesan lakaran kecil v-img tanpa berjaya. Tetapan imej saya adalah seperti berikut:

<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>

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.

Answer 1

Saya tidak fikir anda akan mendapat ini secara langsung, tetapi anda tidak perlu melakukan apa-apa lagi untuk mendapatkan hasil yang anda inginkan.

Sedia untuk digunakan terus dari kotak... Gunakan komponen Hover untuk mencetuskan acara dan gunakan nilai slot (boolean) untuk menogol kelas CSS.

template

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

Sesuaikan... Kemudian tambahkan beberapa gaya julat. Berikut adalah contoh mudah, tetapi anda boleh menggayakannya mengikut citarasa anda.

Gaya

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

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

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

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

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