Эффект hover на аватары, сообщения

автор Вс 17 Янв - 19:49

Эффект hover на аватары, сообщения

Коды, предоставленные в учебнике, должны быть расположены в папке Панель Управления.

Панель Управления Оформление Картинки и Цвета Цвета Каскадная таблица CSS

1.Определение: Следующий код CSS сможем сделать наш аватар в сообщениях имеет прозрачность, а при наведении мыши на элемент отображается полностью.

2.Коды:

Phpbb3:

Код:: .postprofile a img{ opacity: 0.7; transition: all 0.5 s ease 0s; -moz-transition: all 0.5 s ease 0s; -webkit-transition: all 0.5 s ease 0s; } .postprofile a img:hover { opacity: 1; }

Phpbb2:

Код:: .postdetails a img{ opacity: 0.7; transition: all 0.5 s ease 0s; -moz-transition: all 0.5 s ease 0s; -webkit-transition: all 0.5 s ease 0s; } .postdetails a img:hover { opacity: 1; }

PunBB:

Код:: .user-basic-info a img{ opacity: 0.7; transition: all 0.5 s ease 0s; -moz-transition: all 0.5 s ease 0s; -webkit-transition: all 0.5 s ease 0s; } .user-basic-info a img:hover { opacity: 1; }

Invision:

Код:: .postprofile a img{ opacity: 0.7; transition: all 0.5 s ease 0s; -moz-transition: all 0.5 s ease 0s; -webkit-transition: all 0.5 s ease 0s; } .postprofile a img:hover { opacity: 1; }

3.Предварительный просмотр:

автор Чт 8 Фев - 20:34

Код:: /* Ховер на картинки */ a img{transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;opacity:1;-moz-opacity:1;-khtml-opacity:1;filter:alpha(opacity=1)} a img:hover{opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;filter:alpha(opacity=0.5)}

URL:
BBCode:
HTML:

Эффект hover на аватары, сообщения

Ховер на картинки