/* 容器设置：固定大小并重叠图片 */
.hover-image-container {
position: relative;
display: inline-block;
overflow: hidden;
width: 300px; /* 你可以根据需要调整宽度 */
height: 300px; /* 你可以根据需要调整高度 */
}

/* 两张图片的基础样式：绝对定位，重叠在一起 */
.hover-image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 确保图片不变形 */
transition: opacity 0.5s ease; /* 平滑过渡时间：0.5秒 */
}

/* 默认状态：第二张图片透明度为 0（隐藏） */
.hover-image-container .img-back {
opacity: 0;
}

/* 鼠标悬停状态：第一张变透明，第二张显示出来 */
.hover-image-container:hover .img-front {
opacity: 0;
}

.hover-image-container:hover .img-back {
opacity: 1;
}