我正在尝试使用 Vuetify 组件来实现某些 v-img 缩略图的效果，但没有成功。我的图像设置如下：

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

我将这些水平排列在一行与列中，我试图将其设置为这样，当我在每个 v-img 上时，它们会分别变暗，并且一个白色的实心 v 按钮将出现在中心，我将为其分配一个链接/文本也是如此。由于悬停组件似乎缺乏调光属性，因此最好的方法是什么。