如何实现头像悬停时文字滑入效果？保留原有浮动及悬停动画

第一步：调整HTML结构 #

先移除原代码中多余的</a>标签，再在头像容器内添加姓名展示元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Floating Avatar</title>
    <link rel="stylesheet" href="./styles/main.css">
    <script src="./js/main.js" defer></script>
</head>
<body>
    <div class="container">
        <div class="avatar">
            <img src="assets/images/avatar.png" alt="avatar" class="avatarimage"/>
            <!-- 添加姓名显示元素 -->
            <div class="avatar-name">Lucas Ward</div>
        </div>
    </div>
</body>
</html>

第二步：修改CSS样式 #

保留原有浮动动画和图片缩放效果，新增姓名滑入的过渡样式：

body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Helvetica', sans-serif;
    background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
}

h1 {
    font-size: 24px;
    margin: 10px 0 0 0;
    font-weight: lighter;
    text-transform: uppercase;
    color: #eeeeee;
}

p {
    font-size: 12px;
    font-weight: light;
    color: #333333;
}

span a {
    font-size: 18px;
    color: #cccccc;
    text-decoration: none;
    margin: 0 10px;
    transition: all 0.4s ease-in-out;
    &:hover {
        color: #ffffff;
    }
}

@keyframes float {
    0% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
        transform: translatey(0px);
    }
    50% {
        box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
        transform: translatey(-20px);
    }
    100% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
        transform: translatey(0px);
    }
}

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

.avatar {
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    border: 5px white solid;
    overflow: visible; /* 修改为visible，允许姓名元素在容器外显示 */
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
    position: relative; /* 设置相对定位，作为姓名元素的定位基准 */
}

.avatarimage {
    width: 100%;
    transition: all .5s ease-in-out;
}

/* 悬停时触发图片缩放 */
.avatar:hover .avatarimage {
    transform: scale(1.05);
}

/* 姓名元素初始状态：隐藏在容器下方 */
.avatar-name {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 16px;
    font-weight: lighter;
    text-transform: uppercase;
    transition: all .5s ease-in-out;
    white-space: nowrap;
}

/* 悬停时姓名滑入显示 */
.avatar:hover .avatar-name {
    bottom: -10px;
}

关键改动说明 #

1. 调整.avatar的overflow属性为visible，确保姓名元素可以在容器外部显示
2. 给.avatar添加position: relative，为姓名的绝对定位提供参考坐标系
3. 新增.avatar-name样式，通过绝对定位让姓名初始隐藏在容器下方，利用transition实现滑入动画
4. 将原图片缩放触发条件从.avatarimage:hover改为.avatar:hover .avatarimage，确保鼠标悬停在整个头像区域时，同时触发图片缩放和姓名滑入效果

内容的提问来源于stack exchange，提问作者Lucas Ward