Css – Simplest way to use CSS to fade in an overlay block

css

http://jsfiddle.net/AndyMP/T5pX2/

.block {
    position: relative;
    margin: 25px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
.overlay {
    width: 300px;
    height: 300px;
    background: yellow;
    opacity: 0;
}

<div class="block">
    <div class="overlay">
    </div>
</div>

Best Solution

What you have at the moment is not an overlay it's just one div inside another.

To make it an overlay you need to use position:absolute as follows:

JSfiddle Demo

CSS

.block {
    position: relative;
    margin: 25px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding:1em;
}
.overlay {
    background: rgba(0,0,0,0.5);
    opacity: 0;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition:opacity 0.5s ease;
}

.block:hover .overlay {
    opacity:1;
}
Related Question