Hover state on parent changes when hovering on child link - css

Question

I have alot of CSS and its throwing me off. I need an image to become less opaque when I hover on it and a child element, but the child element slides in when the image is hovered on. I got half of it to work, but the image returns to full opacity when the child element is hovered on. I can't get the selector right. Here is whats working now http://www.fuzionvideos.com/#video_recent
Here is the code:
<ul><li id="vid_link" class="box 1"><img src="http://www.fuzionvideos.com/images/uploads/SF_BoT.jpg" alt="Belt - Truth"> <span class="caption description">Armor of the Lord: Belt of Truth</span><b class="title_line">Belt - Truth</b></li></ul>
and the CSS:
#vid_display .box {
cursor: pointer;
height: 199px;
overflow: hidden;
width: 300px;
float: left;
position: relative;
}
#vid_display .box img {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
position: absolute;
left: 0;
}
#vid_display .box .caption {
position: absolute;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#vid_display .box .description {
height: 90px;
width: 300px;
display: block;
bottom: -140px;
line-height: 25pt;
text-align: left;
padding-left: 8px;
line-height:normal;
}
#vid_display .box:hover .description {
-moz-transform: translateY(-150%);
-o-transform: translateY(-150%);
-webkit-transform: translateY(-150%);
transform: translateY(-150%);
}
#vid_display ul {
padding-left: 0px;
}
#vid_display li{
display: inline;
margin-right: 18px;
}
#vid_display img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#vid_display a :hover {
color: #ed1c24;
}
.title_line {
background-color:#ebebeb;
position: absolute;
height: 25px;
width: 300px;
top: 169px;
left: 0;
z-index: 101;
padding-top: 8px;
}
and on jsfiddle : http://jsfiddle.net/blalan05/FkV2z/

Answer 1

You're applying opacity to the hovered image. So, when you hover on anchor, the image is no longer hovered. Try applying the :hover for the .box, so when you will hover on the anchor (which is a child of .box) the .box will be still considered as hovered.
Change this:
#vid_display img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
to this:
#vid_display .box:hover img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}