css动画层级覆盖 |js css opacity

.box {
position:relative;
}
.box:hover img {
transform: scale(1.2);
z-index: 1;
}
.box:hover .text {
opacity: 1;
z-index: 2;
}

在上面的代码中，大家通过使用z-index属性，将鼠标悬停在.box元素上时，图片的放大效果置于文字显示效果之上，从而达到先显示图片效果，再显示文字效果的效果。

在调整层级关系时，需要注意以下几点：

• 必须为元素设置position属性，即relative、absolute或fixed
• 层级关系的大小通过z-index属性来表示，数值越大，层级越高
• 同一元素上，层级高低的调整顺序，顺序越晚调整的层级越高

通过合理地调整CSS动画的层级关系，可以实现各种炫酷的效果，增强网站的交互性和视觉效果。