DIV container not showing in front of Anchor image - html

Question

so i have a situation where i want text to appear over an image using visibility:hidden/visible and also playing with opacity. i cannot do it for some reason. Note that this is in a list because i have other images displayed in the same list but here i am only showing one. below is the html:
<ul>
<li>
<a class="pic" href="#">
<img alt="" src="/servlet/servlet.FileDownload?file=00PU00000096kH2MAI" style="width: 300px; height: 160px;" />
</a>
<div class="hovertext"> my hover text</div>
</li>
</ul>
and the css is here:
#gallery ul{
margin:0;
padding:0;
list-style:none;
}
#gallery li{
display:block;
float:left;
width:310px;
height:170px;
margin:0 15px 15px 0;
}
#gallery li a{
display:block;
float:left;
width:300px;
height:160px;
margin:0;
padding:4px;
}
#gallery li a:hover {
color:#FFFFFF;
opacity:0.6;
background-color:#666666;
}
#gallery li a:hover .hovertext{
visibility:visible;
}
.hovertext{ width:300px; height:85px;
background-color:#666666;
opacity:0;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
all this does is allow me to see that the image is opaque and i can see that the div is in the background but i just cannot bring it forward to display in front of the opaque text. Any help would be greatly appreciated.

Answer 1

Look at the following code.
#gallery li a:hover .hovertext{
visibility:visible;
}
The above code will look the child element of hovertext when you hover the link. In your case, it is siblings element. So update your CSS like below.
#gallery li a:hover + .hovertext{
visibility:visible;
}
Also you have added opacity:0 for hovertext class. I think there is no need for that one. Because already you have visibility:hidden for the same class. So update your CSS like below.
.hovertext{ width:300px; height:85px;
background-color:#666666;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
DEMO