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

代码语言:html

所属分类:背景

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

代码标签: 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, adip.........完整代码请登录后点击上方下载按钮下载查看

网友评论0