html - 使用 CSS 在鼠标离开区域后淡出鼠标悬停时显示的图像

Question

在我的新主页上工作，在 wordpress 中，但使用 html 编辑器，因为 wordpress 主题像所有 hec 一样减慢了我的网站。我几乎准备好了，只是想知道我是如何完成以下任务的:

On my staging page here you can see另一幅画面出现在它的面前。我希望该图像在鼠标离开图像后淡出。

这是我的代码:

<div class="imageBox">
<div class="imageInn">
    <img src="https://pausethemoment.photography/wp-content/uploads/2017/07/Melbourne-Wedding-Photography-Pause-The-Moment-Beach-Wedding-Photography-610x345.jpg" alt="Sandringham Melbourne Wedding Photography - Sun sets on couple on a beach.">
</div>
<div class="hoverImg">
    <a href="https://pausethemoment.photography/contact-us/"><img src="https://pausethemoment.photography/wp-content/uploads/2017/07/Wedding-Photography-Melbourne-Limited-Dates-Overlay.png" alt="Pause The Moment Melbourne Wedding Photography" width="610" height="345" class="aligncenter size-full wp-image-14308" /></a>
</div>
</div>

然后是这个 CSS:

.imageBox 
    {
        position: relative;
        float: left;
    }
    .imageBox .hoverImg {
        visibility:hidden;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: visibility 0s, opacity 0.5s linear;
    }
    .imageBox:hover .hoverImg {        
        display: block;
        visibility: visible;
        opacity: 1;
    }

尝试在

上使用::after 标签

 .imageBox .hoverimage

像这样的各种格式:

.imageBox:hover::after .hoverImg 
        {
        visibility:visible;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        }

但无济于事。也玩过动画延迟等，但似乎无法让它留在那儿!尝试了 webkit 转换，但我什至无法让它们淡入。非常感谢任何帮助!

Answer 1

问题似乎与使用可见性属性有关。 CSS transition 不知道如何生成“可见”和“隐藏”之间的中间值，因为这些值不是数字。

尝试移除所有出现的可见性并仅将过渡应用于不透明度。

.imageBox {
    position: relative;
    float: left;
}
.imageBox .hoverImg {
    /*visibility:hidden;*/
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: /*visibility 0s,*/ opacity 0.5s linear;
}
.imageBox:hover .hoverImg {        
    display: block;
    /*visibility: visible;*/
    opacity: 1;
}