v-img にオーバーレイを追加し、ホバー時に中央ボタンを追加します

Question

Vuetify コンポーネントを使用して v-img サムネイル効果を実現しようとしていますが、成功しません。私の画像設定は次のとおりです:

<v-row class="fill-height pa-5"
                   align-content="センター"
                   justify="center">
                <v-col class="text-subtitle-1 text-center"
                       列 = "12"
                       sm="3">
                    <vカード>
                        <v-img :src="item.docs.doc1"
                               アスペクト比 = ".77""></v-img>
                    </v-card>
                </v-col>
                <v-col class="text-subtitle-1 text-center"
                       列 = "12"
                       sm="3">
                    <vカード>
                        <v-img :src="item.docs.doc2"
                               アスペクト比 = ".77""></v-img>
                    </v-card>
                </v-col>
                <v-col class="text-subtitle-1 text-center"
                       列 = "12"
                       sm="3">
                    <vカード>
                        <v-img :src="item.docs.doc3"
                               アスペクト比 = ".77""></v-img>
                    </v-card>
                </v-col>
                <v-col class="text-subtitle-1 text-center"
                       列 = "12"
                       sm="3">
                    <vカード>
                        <v-img :src="item.docs.doc4"
                               アスペクト比 = ".77""></v-img>
                    </v-card>
                </v-col>
            </v-row>

これらを行と列に水平に配置し、各 v-img に移動すると個別に暗くなり、白い実線の v ボタンが中央に表示されるように設定しようとしています。リンク/テキストも割り当てられます。ホバーコンポーネントには調光プロパティが欠けているように見えるので、最善のアプローチは何ですか。

Answer 1

これを直接得られるとは思いませんが、望む結果を得るためにこれ以上何もする必要はありません。

箱から出してすぐ... Hover コンポーネントを使用してイベントをトリガーし、スロット (ブール値) 値を使用して CSS クラスを切り替えます。

＃＃＃＃＃＃テンプレート＃＃＃＃＃＃ リーリー ＃＃＃カスタマイズ... 次に、範囲スタイルをいくつか追加します。以下は単純な例ですが、好みに合わせてスタイルを設定できます。

＃＃＃＃＃＃スタイル＃＃＃＃＃＃ リーリー 例: https://codepen.io/alexpetergill/pen/NWBadjV

ドキュメント:

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

API:

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