CSS图片淡入问题：hover叠加层无过渡仅即时切换（WordPress环境）

我想要实现鼠标悬停时，叠加图片（.after）淡入的过渡效果，但当前效果是即时切换而非渐变。在WordPress中运行代码时，直接切换到第二张图片，没有淡入动画。

原代码 #

HTML

<div class="image-container">
    <img src="https://basicfishkeeping.com/wp-content/uploads/2023/01/Freshwater-Aquatic-Background-7.png" class="before">
    <img src="https://basicfishkeeping.com/wp-content/uploads/2023/01/Freshwater-Aquatic-Background-8.png" class="after">
</div>

CSS

.image-container {
    position: relative;
    width: 250px;
    height: 250px;
}
.image-container .before {
    width: 100%;
    height: 100%;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    transition: 0.5s;
}
.image-container:hover .after {
    display: block;
    opacity: 1;
}

问题原因 #

核心问题是display: none和display: block的切换——CSS过渡对display属性的变化不支持，因为这个属性会直接让元素从文档流中添加/移除，没有中间状态可以实现渐变过渡。

解决方案 #

下面提供两种可行的修改方案，任选其一即可：

方案一：用visibility替代display

通过visibility控制元素可见性（保留文档流位置），配合opacity实现过渡，同时用pointer-events避免未悬停时干扰底层元素：

.image-container {
    position: relative;
    width: 250px;
    height: 250px;
}
.image-container .before {
    width: 100%;
    height: 100%;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden; /* 替换display:none */
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none; /* 未悬停时不接收鼠标事件 */
}
.image-container:hover .after {
    visibility: visible; /* 替换display:block */
    opacity: 1;
    pointer-events: auto; /* 悬停时恢复事件接收 */
}

方案二：始终显示.after，仅过渡opacity

更简洁的方式：让.after始终存在于页面上，只通过透明度变化实现淡入效果：

.image-container {
    position: relative;
    width: 250px;
    height: 250px;
}
.image-container .before {
    width: 100%;
    height: 100%;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* 未悬停时不干扰底层 */
}
.image-container:hover .after {
    opacity: 1;
    pointer-events: auto; /* 悬停时恢复交互 */
}

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