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

Очень забавное решение буквально из пяти строк кода исключительно на сss, которое накладывает затемнение на выбранные нами картинки. Ничего сложного, никаких стороних файлов или jquery кодов! Очень полезная штука, когда необходимо скрыть счетчики посетителей или какие то рекламные блоки!

1. По умолчанию картинки затемнены
В файл стилей css добавляем код:

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

2. По умолчанию картинки не затемнены
В этом случае тень будет накладываться при наведении курсора!

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

3. Нужные картинки оборачиваем кодом:

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