如何为图片添加过渡动画并垂直居中班级项目着陆页元素？

我为班级服务器制作着陆页，按钮悬停时显示成员图片，但存在两个问题：

• 图片显示/隐藏无过渡动画
• 按钮内元素无法垂直居中

通过调整CSS布局和过渡属性，同时简化交互逻辑，可解决这两个问题：

核心改动说明 #

• 图片过渡动画：放弃display:none/block（无法触发过渡），改用opacity和visibility属性配合过渡效果，实现平滑淡入淡出
• 垂直居中：将按钮(<a>)设置为flex容器，通过flex-direction:column和justify-content:center实现内部元素垂直居中
• 简化交互：用CSS伪类:hover替代JS监听，减少代码复杂度

修改后的完整代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>11TGPSI</title>
</head>
<body>
    <div id="header">
        <div class="logo">11TGPSI.</div>
        <div class="container">
            <div class="line">
                <a href="">
                    <div class="number">Nº 1</div>
                    <div class="name">Afonso Nabeto</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 2</div>
                    <div class="name">Bianca Silva</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 3</div>
                    <div class="name">Duarte Rocha</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 4</div>
                    <div class="name">Guilherme Costa</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
            </div>
            <div class="line">
                <a href="">
                    <div class="number">Nº 5</div>
                    <div class="name">Hugo Silva</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 6</div>
                    <div class="name">Joana Rita</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 7</div>
                    <div class="name">João Teixeira</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 8</div>
                    <div class="name">João Ladeira</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
            </div>
            <div class="line">
                <a href="">
                    <div class="number">Nº 9</div>
                    <div class="name">Keila Mendes</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 10</div>
                    <div class="name">Leonardo Melendre</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 11</div>
                    <div class="name">Lucas Diniz</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 12</div>
                    <div class="name">Marlom Silva</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
            </div>
            <div class="line">
                <a href="">
                    <div class="number">Nº 13</div>
                    <div class="name">Miguel Lourenço</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 14</div>
                    <div class="name">Ruben Magalhães</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 15</div>
                    <div class="name">Tomé Almeida</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
                <a href="">
                    <div class="number">Nº 16</div>
                    <div class="name">Ygor Mendonça</div>
                    <div class="image"><img src="./images/personIcon.png" height="120"></div>
                </a>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码

@import url('https://fonts.googleapis.com/css?family=Poppins:700|Poppins:400');

:root {
    --text: #ebe7e5;
    --background: #0c0a09;
    --primary: #8c9fa6;
    --secondary: #0b0c0e;
    --accent: #64827b;
}

* {
    font-family: Poppins;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#header {
    width: 100%;
    height: 100vh;
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo {
    color: var(--text);
    font-size: 40px;
    font-weight: bold;
    height: 60px;
    margin-left: 15px;
    margin-bottom: 20px;
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.line {
    display: flex;
}

a {
    color: var(--text);
    width: 200px; 
    height: 70px; 
    margin: 20px;
    padding: 0 8px;
    border-radius: 8px;
    text-decoration: none; 
    border: 1px solid;
    transition: all 0.8s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: transparent;
}

a:hover {
    height: 200px;
    background: var(--text);
    color: var(--secondary);
}

.number {
    font-weight: bold;
    font-size: 28px;
}

.name {
    font-size: 18px;
}

.image {
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

a:hover .image {
    opacity: 1;
    visibility: visible;
}

改动细节解释 #

1. 图片过渡实现：

   • 用opacity:0和visibility:hidden替代display:none，这两个属性支持过渡动画
   • 鼠标悬停时通过a:hover .image触发opacity:1和visibility:visible，实现平滑淡入

2. 垂直居中实现：

   • 将<a>设置为display:flex; flex-direction:column; justify-content:center，让内部元素自动垂直居中
   • 把number和name的margin-left换成<a>的padding，确保内容在居中容器内左对齐

3. 其他优化：

   • 移除了JS交互逻辑，用CSS伪类实现悬停效果，代码更简洁高效
   • 修正background-color:none为transparent，符合CSS语法规范
   • 添加box-sizing:border-box，避免内边距影响元素尺寸计算

内容的提问来源于stack exchange，提问作者Tomé Almeida