Fügen Sie ein Overlay auf V-IMG und eine mittlere Schaltfläche hinzu, wenn Sie den Mauszeiger darüber bewegen

Question

Ich versuche, die Vuetify-Komponente zu verwenden, um einige V-IMG-Thumbnail-Effekte zu erzielen, ohne Erfolg. Meine Bildeinstellungen sind wie folgt:

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

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.

Answer 1

我认为您不会直接得到这个，但您不需要做更多的事情来获得您想要的结果。

开箱即用... 使用 Hover 组件触发事件并使用槽（布尔）值切换 CSS 类。

模板

<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%);
}

示例：https://codepen.io/alexpetergill/pen/NWBadjV

文档：https://vuetifyjs.com/en/components/hover/

API：https://vuetifyjs.com/en/api/v-悬停/#slots