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

0

Автор verond | Рубрики Вебмастеру | 25-10-2013


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

 

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

#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; }

 

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

 

Добавляйте пост в свои любимые социальные сети, и Вы сможете вернуться к этой записи в любое время.


Написать комментарий

Spam Protection by WP-SpamFree