Affecting an already hovered element, when another is hovered

Question

I saw other posts about affecting other elements, when one is hovered, but can we have something like a hover-ception? For example, in my code, the description shows when we hover on the sidebar image, but when you hover on the description, the effect of hovering the image goes away. Can we like, have #sidebarimage:hover #description:hover #sidebarimage(:hover) or something? I want the image to stay faded (the effect it gets when its hovered) when my courser is on the description (whhich is over the image). I cant wrap my head around it. Thank you.

https://www.dropbox.com/s/atyrxbvs246bpmt/Screenshot%202014-11-07%2010.09.21.png?dl=0

#sidebarimage img:hover {
-webkit-transition: opacity 0.6s linear;
opacity: 0.5;
z-index:1;
}

#sidebarimage:hover #description {
    margin-top:-50%;
    z-index:200;
          opacity:1;
          -moz-transition-duration:0.6s;
          -webkit-transition-duration:0.6s;
          -o-transition-duration:0.6s;
     }

Answer 1

This appears to be a bug. From the W3C specs for CSS Color:

If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.

In your code, the #description has an opacity of 1, and so doesn't get assigned a position in the stacking order. As such, it gets drawn behind the image which now has an opacity of 0.5. However, if you assigned the #description a non-1 value, it appears to display correctly.

Take a look at this JSFiddle. Try setting the opacity to 1 and observe the difference. I added a red background around the #description just to make it easier to see.

For more detailed information, you could take a look at this related StackOverflow question:
css opacity affecting sibling image opacity