html部分

<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="style.css">

<body>

    <div class='container'>
        <div class='card'>
            <div class='imgBx'>
                <img src=''>
            </div>
            <p>
                David is a software engineer with expertise in cloud computing and distributed systems.
                David is a software engineer with expertise in cloud computing and distributed systems.
            </p>
            <h2>Card 01</h2>
        </div>
        <div class='card'>
            <div class='imgBx'>
                <img src=''>
            </div>
            <p>
                David is a software engineer with expertise in cloud computing and distributed systems.
                David is a software engineer with expertise in cloud computing and distributed systems.
            </p>
            <h2>Card 02</h2>
        </div>
        <div class='card'>
            <div class='imgBx'>
                <img src=''>
            </div>
            <p>
                David is a software engineer with expertise in cloud computing and distributed systems.
                David is a software engineer with expertise in cloud computing and distributed systems.
            </p>
            <h2>Card 03</h2>
        </div>
    </div>

</body>

</html>

CSS部分

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root {
    --clr: #222;
}

body {
    display: flex;
    justify-content: center;
    align-self: center;
    min-height: 100vh;
    background: var(--clr);
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px;
}

.container .card {
    position: relative;
    width: 320px;
    height: 250px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    transition: 0.5s;
}

.container .card:hover {
    height: 350px;
}

.container .card .imgBx {
    position: absolute;
    inset: 20px 20px 50px 20px;
    background: #f00;
    border-radius: 15px;
    transform: 0.5s;
    z-index: 1000;
}

.container .card:hover .imgBx {
    inset: -50px 60px 250px 60px;
    box-shadow: 0 0 0 10px var(--clr);
}

.container .card .imgBx ::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: transparent;
    left: -30px;
    border-top-right-radius: 20px;
    transform: translateY(-100px);
    opacity: 0;
    box-shadow: 5px -5px 0 4px var(--clr);
    pointer-events: none;
    transform: 0.5s;
}

.container .card:hover.imgBx ::before {
    opacity: 1;
    transform: translateY(50px);
}

.container .card .imgBx ::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: transparent;
    right: -30px;
    border-top-left-radius: 20px;
    transform: translateY(-100px);
    opacity: 0;
    box-shadow: -5px -5px 0 4px var(--clr);
    pointer-events: none;
    transform: 0.5s;
}

.container .card:hover .imgBx ::after {
    opacity: 1;
    transform: translateY(50px);
}


.container .card .imgBx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}


.container .card p {
    position: relative;
    padding: 40px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50px);
    transition: 0.5s;
}

.container .card:hover p {
    opacity: 1;
    visibility: visible;
    transform: translateY(40px);
}

.container .card h2 {
    position: absolute;
    bottom: 8px;
    color: #333;
    transition: 0.5s;
    font-weight: 600;
}

.container .card:hover h2 {
    padding: 5px 25px;
    background: #65ff50;
    bottom: -25px;
    border-radius: 15px;
    box-shadow: 0 0 0 10px var(--clr);
}

由于博客的CSS导致会有部分误差


实现演示

David specializes in designing distributed systems that are both scalable and efficient. He is particularly interested in the intersection of cloud infrastructure and machine learning.

Distributed

David has contributed to multiple open-source projects and enjoys sharing his knowledge through blogs and technical talks. His recent work focuses on serverless computing and microservices.

Contributor