CSS — затемненные картинки при наведении осветляются

Пять строк CSS кода без использования JavaScript и прочих языков. Затемненная картинка при наведении курсора становится светлой.

Полезное решение, когда необходимо спрятать счетчики веб-аналитики или сделать их менее заметными.

HTML разметка

<div class="box-image">
    <figure>
        <img src="#" alt="">
    </figure>
</div>

CSS. По умолчанию затемнены

/*Светление картинок при наведении*/
.box-image a img, 
.box-image img{
    opacity:0.3;
}   
.box-image a img:hover, 
.box-image img:hover{
    opacity:1.0;
}

CSS. По умолчанию не затемнены

/*Затемнение картинок при наведении*/
.box-image a img, 
.box-image img{
    opacity:1.0;
}   
.box-image a img:hover, 
.box-image img:hover{
    opacity:0.3;
}

Как вы уже могли догадаться, за тень отвечает стиль opacity, который накладывает на объект не тень, а прозрачность. Значение параметров колеблется от 0 — полная прозрачность до 1 — 100% непрозрачности.