vuesax实现vs-card图片卡片悬浮显示文字效果代码-html代码-BFW代码库

vuesax实现vs-card图片卡片悬浮显示文字效果代码

代码语言：html

所属分类：背景

代码描述：vuesax实现vs-card图片卡片悬浮显示文字效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">



    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vuesax@4.0.1-alpha.25.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
        
        body {
        	font-family: 'Poppins', sans-serif;
        	background: #273c75;
        	padding: 50px;
        }
        
        #app {
        	display: grid;
        	grid-template-columns: 1fr;
        	row-gap: 50px;
        	width: 450px;
        	margin: 0 auto;
        }
    </style>


</head>

<body>
    <div id="app">
        <vs-card>
            <template #title>
			<h3>Pot with a plant</h3>
		</template>
            <template #img>
			<img src="//repo.bfw.wiki/bfwrepo/image/62edbefa20a31.png" alt="">
		</template>
            <template #text>
			<p>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			</p>
		</template>
        </vs-card>

        <vs-card type="2">
            <template #title>
			<h3>Pot with a plant</h3>
		</template>
            <template #img>
			<img src="//repo.bfw.wiki/bfwrepo/image/62edbefa20a31.png" alt="">
		</template>
            <template #text>
			<p>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			</p>
		</template>
        </vs-card>

        <vs-card type="3">
.........完整代码请登录后点击上方下载按钮下载查看