CSS3淡入，暂停，淡出悬停

Question

我有一些div(盒子)，当你把鼠标悬停在它们上面时，应用一个彩色的叠加，当鼠标离开div区域时，渐变和淡出。

单独使用CSS3，我如何调整我的代码来做以下事情:在悬停时，用快速过渡淡出覆盖，然后当鼠标离开悬停区域时，保持覆盖可见1秒(即暂停它)，然后慢慢淡出。

这是一个工作的JSfiddle: http://jsfiddle.net/yrzx7/

工作CSS代码:

div.box {
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
}
div.box img {
    width: 100%;
    height: auto;
}
div.box .details {
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, .85);
color: #fff;
opacity: 0;

/* Fade out */
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 250ms;
-ms-transition: opacity;
-ms-transition-timing-function: ease-out;
-ms-transition-duration: 250ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}

div.box .details:hover {
opacity: 1;
/* Fade in */
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 250ms;
-ms-transition:opacity;
ms-transition-timing-function: ease-out;
ms-transition-duration: 250ms;
-moz-transition:opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}

Answer 1

您可以添加transition-delay: 1s;淡出过渡。

Like this - Demo