M Zeinstra M Zeinstra -5 years ago 146
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">
I'm some test text!

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

Answer Source

In overlay add:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download