Edit in JSFiddle

<img src="http://dbmast.ru/wp-content/uploads/2014/01/demo-opacity2.jpeg" alt="Эффект прозрачности" width="377" height="196" class="opacity" />
<br>
<br>
<img src="http://dbmast.ru/wp-content/uploads/2014/01/demo-opacity2.jpeg" alt="Наводим резкость" width="377" height="196" class="clarity" />

.opacity {
-moz-transition: all 0.4s; 
-webkit-transition: all 0.4s;  
-ms-transition: all 0.4s;  
-o-transition: all 0.4s;  
transition: all 0.4s; 
opacity:1;
filter:alpha(opacity=100);
}

.opacity:hover {
opacity:0.5;
filter:alpha(opacity=50);
}

.clarity {
opacity:0.5;
filter:alpha(opacity=50);   
}

.clarity:hover {
-moz-transition: all 0.4s; 
-webkit-transition: all 0.4s;  
-ms-transition: all 0.4s;  
-o-transition: all 0.4s;  
transition: all 0.4s; 
opacity:1;
filter:alpha(opacity=100);
}