CSS悬停淡出

Question

我有一些元素，当您将鼠标悬停在图像上时会弹出，但是我希望该图像在5秒钟后消失。要么将该项目转换回不透明度0，要么在5秒钟后隐藏。我发现项目从0-> 1的不透明度移动，但是从1-> 0的不透明。这是我到目前为止的结果：

.beans { 
    position:absolute;
    visibility:hidden;
    width: 500px;
    height:300px;
}
.thumb:hover, .thumb:hover .beans { 
    visibility:visible;
    top:0; left:10%; 
    z-index:1;
    transition-delay:1s;
}

所以，现在图像等待加载1秒钟，但我想立即显示，然后在5秒钟后回到不透明度0。

谢谢。