Ссылки, которые не отображаются на изображении при наведении

У меня есть изображение опрокидывания, и цель состоит в том, что когда пользователь мыши над изображением, он темнеет (что я достиг с использованием изображения опрокидывания), а две ссылки появляются под заголовком "узнать больше" и "посетить сайт" (они должны появиться над образ). Прежде чем я приду к стилю, я хотел убедиться, что все работает нормально, и моя проблема в том, что ссылки, похоже, вообще не появляются. Что я делаю неправильно, что я должен исправить, чтобы видеть ссылки, когда изображение затуманивается?

Веб-сайт с проблемой находится здесь, и вы можете увидеть, наведите ли вы на одно из изображений, как ссылка не появляется. Мой код ниже.

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;  
}