st4rgut st4rgut - 23 days ago 7
CSS Question

hover over photo wont add transparent div

I'm trying to add a transparent text overlay on top of an image. I've decided that using CSS to add the transparent div would be easiest, but can't figure out why my code isn't working. I changed the opacity of the image when hovering over and set the div containing the text to

visibility:hidden
. I used the
hover
effect to make
visibility:visible
. I just can't get it to work though. please help. Here's the fiddle:

https://jsfiddle.net/3Lx1pyL9/

Here's the html:

<div id="chickcontainer">

<img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div>
<img class="chicks" src="https://smittenkitchendotcom.files.wordpress.com/2016/09/piri-piri-chicken.jpg?w=750">
<img class="chicks" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRzRJV4iLzYh0eqyVG9-OidAW1t24Xa_vmVRX4Qy-WoyMIgpCx6">
</div>


and the css:

#chickcontainer img{
position:relative;
width:30%;
height:30%;
display:inline-block;
margin-left:2%;
border-radius:100%;
border: solid .5px;

}

.overlay{
visibility:hidden;
position:absolute;
width:20%;
height:90%;
top:12%;
left:7%;
z-index:0;
}

#chickcontainer img:hover .overlay{
visibility:visible;
z-index:100;
}

Answer

The problem is your selector:

#chickcontainer img:hover .overlay

This selector expects .overlay to be a descendent of img:hover and images are not able to have descendants at all. In your html, .overlay is a sibling that sits next to the image.

<img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div>

Instead, you should use the "next sibling" + selector to select the next element and apply the style to it.

#chickcontainer img:hover + .overlay

Here's a working example

#chickcontainer img{
    position:relative;
    width:30%;
    height:30%;
    display:inline-block;
    margin-left:2%;
    border-radius:100%;
    border: solid .5px;

}

.overlay{
    visibility:hidden;
    position:absolute;
    width:20%;
    height:90%;
    top:12%;
    left:7%;
    z-index:0;
}

#chickcontainer img:hover + .overlay{
    visibility:visible;
    z-index:100;
}
<div id="chickcontainer">
    <img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div>
    <img class="chicks" src="https://smittenkitchendotcom.files.wordpress.com/2016/09/piri-piri-chicken.jpg?w=750">
    <img class="chicks" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRzRJV4iLzYh0eqyVG9-OidAW1t24Xa_vmVRX4Qy-WoyMIgpCx6">
</div>