卡片hover弹出文字按钮效果-html代码-BFW代码库

卡片hover弹出文字按钮效果

代码语言：html

所属分类：悬停

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
@import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
:root {
        --d: 700ms;
        --e: cubic-bezier(0.19, 1, 0.22, 1);
        --font-sans: 'Rubik', sans-serif;
        --font-serif: 'Cardo', serif;
    }

        * {
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
        }

        body {
            display: grid;
            place-items: center;
        }

        .page-content {
            display: grid;
            grid-gap: 1rem;
            padding: 1rem;
            max-width: 1024px;
            margin: 0 auto;
            font-family: var(--font-sans);
        }
@media (min-width: 600px) {
            .page-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }
@media (min-width: 800px) {
            .page-content {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .card {
            position: relative;
            display: -webkit-box;
            display: flex;
            -webkit-box-align: end;
            align-items: flex-end;
            overflow: hidden;
            padding: 1rem;
            width: 100%;
            text-align: center;
            color: whitesmoke;
            background-color: whitesmoke;
            b.........完整代码请登录后点击上方下载按钮下载查看