CSS教程：实现底部弹出层模糊效果及平滑高度变化

<div class="contents">
    <!-- 页面其他内容，用于演示弹出层不影响主内容 -->
    contents<br />
    contents<br />
    contents<br />
    contents<br />
    contents Last Row<br />
</div>
<div id="hidden">
    <div id="popup">
        <img src="https://placekitten.com/g/600/100" alt="popup box image" />
        <nav>
            <ul>
                <li>All Projects</li>
                <li>Work ></li>
            </ul>
        </nav>
    </div>
</div>

body,
html {
    margin: 0;
    padding: 0; /* 确保无默认边距 */
}
.contents {
    line-height: 2em;
    padding: 20px; /* 增加一些内边距，使内容更清晰 */
}

/* 1. 外部容器：裁剪弹出层 */
#hidden {
    position: relative; /* 为内部绝对定位的#popup提供定位上下文 */
    height: 100px; /* 控制可见区域高度 */
    overflow: hidden; /* 隐藏超出容器的部分 */
}

/* 2. 弹出层本体：定位与初始状态 */
#popup {
    position: absolute; /* 相对于#hidden进行定位 */
    bottom: 0; /* 底部对齐 */
    left: 0; /* 左侧对齐 */
    right: 0; /* 右侧对齐，确保宽度填充 */
    overflow: hidden; /* 隐藏弹出层内部超出部分 */
    transform: translateY(30px); /* 初始状态下向上平移30px，部分隐藏 */
    transition: transform .5s ease; /* 为transform属性添加平滑过渡动画 */
}

/* 3. 鼠标悬停时弹出层效果 */
#popup:hover {
    transform: translateY(10px); /* 悬停时向上平移10px，露出更多 */
}

/* 4. 弹出层内图像样式与初始模糊效果 */
#popup img {
    width: 100%; /* 确保图片宽度填充容器 */
    height: auto; /* 保持图片比例 */
    border-radius: 5px; /* 圆角效果 */
    filter: blur(3px); /* 初始模糊效果 */
    transition: all .5s ease; /* 为所有属性变化添加平滑过渡 */
}

/* 5. 鼠标悬停时图像效果 */
#popup:hover img {
    filter: blur(0); /* 悬停时取消模糊 */
    transform: scale(1.1); /* 悬停时放大1.1倍 */
}

/* 6. 底部弹出框文本链接样式 */
#popup nav ul {
    position: absolute; /* 绝对定位，浮动在图片上方 */
    top: 0; /* 顶部对齐 */
    width: 100%; /* 宽度填充 */
    margin-top: 5px; /* 顶部外边距 */
    padding: 0; /* 移除默认内边距 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 元素两端对齐 */
    font-size: 23px; /* 字体大小 */
    list-style: none; /* 移除列表默认标记 */
    color: white; /* 文本颜色，确保在模糊背景上可见 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 文本阴影增强可读性 */
}

#popup nav ul li {
    padding: 0 15px; /* 增加列表项内边距 */
    cursor: pointer; /* 鼠标指针样式 */
}