Links Not Appearing Over Image When Moused Over

Question

I have a rollover image, and the goal is that when the user mouses over the image, it darkens (which I achieved using a rollover image) and two links appear titled "learn more" and "visit site" (they should appear over the image). Before I get to styling I wanted to make sure everything was working properly, and my issue is that the links don't seem to appear at all. What am I doing wrong that I should fix to be able to see the links when the image is moused over?

The website with the issue is here and you can see if you mouse over one of the images how the link doesn't appear. My code is below.

HTML

<div id="example1" class="good_example"><a onMouseOut="MM_swapImgRestore()"  onMouseOver="MM_swapImage('ABC','','images/examples/abc_website_over.png',1)"><img  src="images/examples/abc_website_desat.png" alt="visit site" width="300" height="200"  id="ABC"></a>
<div class="options">
<a href="http://www.example.com">Learn More</a><a href="#good_examples" id="click-me1">Visit Site</a>
</div></div>

CSS

#example1:hover.options {
visibility:visible;
}

.options {
visibility:hidden;  
position:absolute;
z-index:9999999;
top:50px;
left:75px;
}

.options a:link {
padding-right:15px; 
padding-left:15px;
padding-top:10px;
padding-bottom:10px;
margin:10px;
color:#ffffff;
font-size:40px;

border-radius:10px;

-webkit-border-radius:10px;

-moz-border-radius:10px;
width:50px; 
text-align:center;
opacity:0.7;
background-color:#069;
}

.options a:hover {
opacity:1;  
}

Answer 1

There's a problem with your css selector

#example1:hover.options {
visibility:visible;
}

Replace the selector to something like this:

#example1:hover > .options {
    visibility:visible;
}

and that should work.

here's a quick sample

Answer 2

you have .options {visibility:hidden;} so it is unseen no matter what content in it. you should at least change it to visible when .options:hover.