How to add image and change visibility on hover CSS - html

Question

I'm trying to do something semi complicated. I have 4 linked images. when I hover over the image I want the opacity to change to 0.7. I also want a ribbon to become visible when you hover that image. Here's the code I'm using
<div id="tracks-content">
<div class="track enrolled">
<a href=""><div class="ribbon"><img src="ribbon.png"/></div>
<span><img src="images/pic-track1.png" /></span></a>
<h3>Track title 1</h3>
<span>Track description here. Lorem ipsum dolor sit amet con sectetuer adipiscing elit.</span>
</div>
<div class="track unavailable">
<a href=""><div class="ribbon"><img src="ribbon.png"/></div>
<span><img src="images/pic-track2.png" /></span></a>
<h3>Track title 2</h3>
<span>Track description here. Lorem ipsum dolor sit amet con sectetuer adipiscing elit.</span>
</div>
</div>
So if I hover over the image for say track1.png then I want track1.png to dim to 70% and I want the visibility for ribbon.png to change from hidden to visible. I keep running into a problem where the opacity of the image is also applied to the ribbon. In the image you can see when I hover the 1st image the ribbon appears but is also getting the opacity. see link for image http://img.photobucket.com/albums/v513/Tearyguitarist/example.png
Here's the css i'm using
#tracks-content .enrolled a:hover > .ribbon{
visiblity:visible;
}
#tracks-content .enrolled a:hover span img{
outline: solid 1px #40a304;
opacity:0.5;
}
Any suggestions? I can't use any position absolutes since the whole page is php driven and could have 1 or 10 tracks so the content has to be dynamic and reuseable.

Answer 1

I cannot recreate the issue, as it seems to work fine in this demo (note: opacity was changed just to make it more obvious). However, a few things to note that might be causing issues.
1) The most likely issue is that it is invalid html to have a div in an a tag (block level element inside an inline), so some browsers may be having issues with that and not functioning correctly.
2) If your css above reflects your true css, then you have misspelled visibility ("visiblity") in setting the ribbon to visible.
3) Have you verified that the ribbon.png itself does not have its own, inherent opacity (since it is a png, it can have opacity in image itself).

Answer 2

Remove your code and try border with some padding instead of using outlineUse below style:
#tracks-content .enrolled a:hover span img{
border: solid 1px #40a304;
padding:1em;
opacity:0.5;
*filter: alpha(opacity=50);
}