M Zeinstra M Zeinstra - 5 months ago 14
CSS Question

Div does not overlap image

I'm struggling here with the fact that my div does not overlap de image. When you hover this div (with a opacity of 0) it gets the opacity of 1 after a transition.

The problem is, though, that the div is below the image, while it should be covering the image (hover somewhere below the image to see the problem) (JSFiddle):



.column {
height: 300px;
width: 300px;
position: relative;
}

.overlay {
background: #ddd;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}

.overlay {
opacity: 0;
transition: opacity .25s linear; /* vendorless fallback */
-o-transition: opacity .25s linear; /* opera */
-ms-transition: opacity .25s linear; /* IE 10 */
-moz-transition: opacity .25s linear; /* Firefox */
-webkit-transition: opacity .25s linear; /*safari and chrome */
}

.overlay:hover {
opacity: .75;
}

<div class="column">
<img src="http://cdn.welingelichtekringen.nl/wp-content/uploads/2014/10/hond-584x340.jpg">
<div class="overlay">
<p>
I'm some test text!
</p>
</div>
</div>





Can anybody help me to make sure the overlay covers the image?

Answer

In overlay add:

top:0;
left:0;