Сss затемнение картинки при наведении мыши

Нам нужно изменить или добавить эффект для отображения аватара на сайте вордпресс или на любом другом движке. Для этого находим название класса, отвечающего за внешний вывод аватарки. Затем вносим изменения в файл стилей в строке нужного класса.

 

Например, было

#post-author .profile-image img { width:90%; height: auto; background: #fff; padding:5%; border:1px solid #ddd;

 

и мы добавляем далее в эту строку следующий код:

 

opacity:0.8;

-moz-opacity:0.8;

filter: alpha(opacity=80) black;

-khtml-opacity: 0.8;

background-color:#fff; }

 

и еще добавляем с hover:

 

#post-author .profile-image img:hover { width:90%; height: auto; background: #fff; padding:5%; border:1px solid #ddd; opacity:1;

-moz-opacity:1;

filter: alpha(opacity=100) black;

-khtml-opacity: 1;

background-color:#fff; }

 

В итоге имеем затемнение или осветление картинки при наведении на нее указателя мыши самым простым и быстрым способом.