I'm actually trying to obtain the reverse effect of this: http://jsfiddle.net/4fgnd/ I want my image to have a black overlay with some transparency, and when I hover with the mouse I'd like the overlay to dissapear.

Any thoughts please? Don't really care if it's css only or a combination between css and js.

<divclass="image">
    <imgsrc="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg"alt=""/>
</div>
<style>
    .image {
        position: relative;
        width: 400px;
        height: 400px;
    }
 
        .imageimg {
            width: 100%;
            vertical-align: top;
        }
 
        .image:after {
            content: '\A';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0,0,0,0.4);
            opacity: 0;
            transition: all0.5s;
            -webkit-transition: all0.5s;
        }
 
        .image:hover:after {
            opacity: 1;
        }
</style>