1

多数の div (ボックス) があり、それらの上にカーソルを合わせると、マウスが div 領域を離れるとフェードインおよびフェードアウトする色付きのオーバーレイが適用されます。

CSS3 だけを使用して、コードを次のように調整するにはどうすればよいですか?ゆっくり出ます。

これが動作する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;
}
4

1 に答える 1

4

You can add transition-delay: 1s; to the fade out transition.

Like this - Demo

于 2013-05-24T11:39:24.507 に答える