Hover div on top of image – show overlay

[Dext3r]

I want to hover the red area and show an overlay on top of the image.

.image-container .showthis {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
background-color: rgba(0, 0, 0, 0.48);
}

.image-container .hoverthis {
position: absolute;
top: 0;
background-color: red;
width: 30px;
height: 30px;
right: 0;
}

.hoverthis:hover .showthis {
display: block;
}

http://codepen.io/anon/pen/vOwEjL?editors=110

[Shikkediel]

codepen.io/anon/pen/bdyNmo

It didn’t work before because .showthis is a sibling and not a descendant of .hoverthis. You could use the + combinator as well in this case of course.

[Author]

Posts