CSS наложение наложения цвета

Question

Я действительно пытаюсь получить обратный эффект от этого: http://jsfiddle.net/4fgnd/ Я хочу, чтобы на моем изображении было черное наложение с некоторой прозрачностью, и когда я наводил указатель мыши, я бы хотел, чтобы наложение исчезло.

Любые мысли, пожалуйста? На самом деле все равно, если это только css или комбинация между css и js.

Благодаря

<div class="image"> 
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" /> 
</div> 

.image { 
    position:relative; 
    width:400px; 
    height:400px; 
} 
.image img { 
    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: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 
.image:hover:after { 
    opacity:1; 
} 

Answer 1

Здесь вы идете, просто обратный CSS http://jsfiddle.net/4fgnd/1226/

.image:before { 
    content:'\A'; 
    position:absolute; 
    width:100%; height:100%; 
    top:0; left:0; 
    background:rgba(0,0,0,0.6); 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 
.image:before { 
    opacity:1; 
} 
.image:hover:before { 
    opacity:0; 
} 

Answer 2

переключатель непрозрачности состояние в CSS :)

Рабочий пример здесь http://jsfiddle.net/4fgnd/1225/

.image { 
    position:relative; 
    width:400px; 
    height:400px; 
} 
.image img { 
    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.6); 
    opacity:1; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 
.image:hover:after { 
    opacity:0; 
}