Img Opacity Hover

Hover mouse over image and bring it to full opacity

by alinktothepast

HTML

<div class="section">
    <img src="http://thebroadcastgroup.com/wp-content/uploads/2012/01/TBG-HB-001.png" />
    <div class="cover"></div>
</div>

CSS

body
{
background: #FFF;
}
img
{
    opacity:1.0;
    filter:alpha(opacity=100);
    position:absolute;
}
/*img:hover
{
opacity:1.0;
    filter:alpha(opacity=100);
}*/

.section {
    position:relative;
}

.cover {
    background:red;
    height:150px;
    position:absolute;
    display:none;
    opacity:.2;
    width:240px;
}

JavaScript

(function() {

    $('.section').on('mouseenter', function() {

        $('.cover').fadeIn();
        
    }).on('mouseleave', function() {

        $('.cover').fadeOut();        
        
    });

}());