Tired eyes - quick markup check?

[maxxd]

Hey y'all.

 

I'm either having a major brain fart or my eyes are entirely too tired today. I've got the following (this is obviously excerpted), and the :hover event on the #secondary aside is not firing in the HTML itself. In Firebug, selecting the :hover state for the #secondary aside behaves as expected. It just doesn't if I actually hover the mouse over the aside.

 

Can anybody see what it is that I'm missing here?

<style>
#secondary:hover img,
.entry-content .featured_image:hover img {
  opacity: .3;
}
#secondary:hover .testimonial,
.entry-content .featured_image:hover .testimonial {
  opacity: 1;
}
.testimonial {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  width: 90%;
  font-weight: 700;
  font-family: 'Source Serif Pro', 'Georgia', 'Times New Roman', serif;
  color: #ffffff;
  opacity: 0;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
</style>

...

<aside id="secondary" class="right" role="complementary">
	<div class="bg"><img src="http://mysite.com/path/to/existing/picture.jpg"></div>
	<div class="testimonial">"This is a testimonial" - a person</div>
</aside>

[maxxd]

Turns out the #secondary aside was behind another div, which was blocking the mouse event.

 

Yup, tired....