CSS3 затухает, приостанавливается, исчезает при зависании

Question

У меня есть несколько разделов (ящиков), которые, когда вы навешиваете на них, накладываете цветную накладку, которая исчезает и исчезает, когда мышь покидает область 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; к выцветанию из перехода.

Как это - Demo