HTML+CSS+JS实现 ❤️响应式团队❤️...transition: all 0...filter: drop-s

效果演示：

代码目录：

主要代码实现：

CSS样式：

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
}

.section-heading {
    font-family: "Dancing Script", cursive;
    text-align: center;
    font-size: 64px;
    color: #10996d;
    margin: 0 0 70px;
}

.container {
    display: flex;
    justify-content: center;
    width: 90%;
    max-width: 1440px;
    margin: 0 auto;
}

.profile {
    position: relative;
    transition: all 0.3s;
}

.profile:hover {
    transform: translateY(25px);
}

.profile img {
    max-width: 100%;
    border-radius: 50%;
    border: 5px solid #f7f7f7;
    filter: drop-shadow(-20px 0 10px rgba(0, 0, 0, 0.1));
    cursor: pointer;
}

.profile:not(:first-child) img {
    margin-left: -20px;
}

.profile .name {
    position: absolute;
    background-color: #10996d;
    color: #fff;
    font-family: "Bebas Neue", cursive;
    padding: 15px 30px;
    border-radius: 100px;
    bottom: -80px;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%, -50px);
    letter-spacing: 1px;
    font-size: 20px;
    opacity: 0;
    transition: all 0.3s;
}

.profile .name::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #10996d;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.profile img:hover+.name {
    opacity: 1;
    transform: translateX(-50%);
    box-shadow: 0 10px 20px rgba(86, 86, 198, 0.3);
}

部分HTML代码 :

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

<head>
    <meta charset="UTF-8">
    <title>Team Profile Hover Effect</title>

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

</head>

<body>

    <section class="team">
        <h2 class="section-heading">响应式团队</h2>
        <div class="container">
            <div class="profile">
                <img src="img/1.jpg" alt="" /><span class="name">Kalyan</span>
            </div>
            <div class="profile">
                <img src="img/2.jpg" alt="" /><span class="name">Suchitra Tiwari</span>
            </div>

            <div class="profile">
                <img src="img/3.jpg" alt="" /><span class="name">Sajid Ghani</span>
            </div>
            <div class="profile">
                <img src="img/4.jpg" alt="" /><span class="name">Dhriti</span>
            </div>
            <div class="profile">
                <img src="img/5.jpg" alt="" /><span class="name">Milind</span>
            </div>
            <div class="profile">
                <img src="img/6.jpg" alt="" /><span class="name">Srikant Tiwari</span>
            </div>
            <div class="profile">
                <img src="img/7.jpg" alt="" /><span class="name">Major Sameer</span>
            </div>
        </div>
    </section>


</body>

</html>

上面的img图片等需要引入即可运行

源码获取

查看博主主页或私信博主获取

精彩推荐更新中：

HTML5大作业实战100套

打卡文章更新 39 / 100天

大家可以点赞、收藏、关注、评论我啦、需要完整文件随时联系我或交流哟~！

在这里插入图片描述