[站长原创]子比主题文章列表鼠标悬停显示

效果图：

CSS代码：

.posts-item {
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* 平滑过渡效果 */
}

.posts-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* 添加更强的阴影 */
    transform: scale(1.02); /* 略微放大，增加立体感，但不浮动 */
}

效果图：

CSS代码：

.posts-item {
    transition: box-shadow 0.3s ease; /* 平滑过渡阴影效果 */
}

.posts-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), 
                0 8px 30px rgba(0, 0, 0, 0.2), 
                0 10px 40px rgba(0, 0, 0, 0.25); /* 增加多个阴影层次，强化立体感 */
}

效果图：上移浮动

CSS代码：

.posts-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡 */
}

.posts-item:hover {
    transform: translateY(-10px); /* 上浮效果 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 加上阴影效果 */
}