JSFiddle - React, Tailwind, and code Playground

by vusan

HTML

<div id="flexi-overlay">
                 
        <span id="flexi-overlay-text-container">
             <a id="flexi-overlay-image-link-container" href="#" class="popup image-link"?>
            <img src="http://i50.tinypic.com/ivd1xd.gif" />
        </a>  
            <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>

CSS

#flexi-overlay-text-container:hover>#flexi-overlay-image-link-container {
    filter: alpha(opacity=60);
    opacity:.6;
}
#flexi-overlay-image-link-container:hover {
    filter: alpha(opacity=100) !important;
    opacity:1 !important;
}