Below is the HTML code snippet:
<div id="flexi-overlay">
<a id="flexi-overlay-image-link-container" href="#" class="popup image-link"?>
<img src="image.jpg" />
</a>
<span id="flexi-overlay-text-container">
<a href="#">
<span class="flexi-link" id="title-1">Modern Duets</span>
<span class="flexi-link" id="title-2"><em>Flexi Compilation</em></span>
<span class="flexi-link" id="title-3"><strong>**New**</strong></span>
</a>
</span>
</div>
The goal is to reduce the opacity of the image within the top link when hovering over the link at the bottom of the page. The attempt below did not produce the desired outcome.
#flexi-overlay-text-container + #flexi-overlay-image-link-container {
filter: alpha(opacity=60);
opacity:.6;
}