CSS3는 마우스 오버시 페이드 인, 일시 중지, 페이드 아웃

Question

마우스를 가져갈 때 마우스가 div 영역을 떠날 때 페이드 인하거나 페이드 아웃되는 컬러 오버레이를 적용하는 많은 div (상자)가 있습니다.

CSS3 만 사용하면 다음과 같이 코드를 적용하는 방법 : 마우스 오버시 빠른 전환으로 오버레이 페이드 한 다음 마우스를 가져 가면 마우스 오버 영역이 1 초 동안 표시됩니다 (즉 일시 중지) , 천천히 페이드 아웃하십시오.

는 다음 작업 JSfiddle입니다 : http://jsfiddle.net/yrzx7/

작업 CSS 코드 : 당신은 페이드 아웃 전환에 transition-delay: 1s;을 추가 할 수 있습니다

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

.

이와 비슷한 - Demo