аватары

[cerisestatic]

1. diarycss.diary.ru/p76576577.htm - это видела, но интересует, как сделать, чтобы при наведении аватар возвращался к оригинальному размеру.
2. как сделать аватар полупрозрачным в обычном состоянии, а при наведении так, чтоб он отображался нормально, обычно, без полупрозрачности?

@темы: дневники, diaryCSS, платный сервис, Дизайн

Comments

[Feleks]

mint king, про задание полупрозрачности есть в эпиграфе.
а изменение при наведение делается при помощи атрибута :hover
например, .avatar img:hover {свойства}
в свойствах задаете оригинальный размер и прозрачность 1.

[cerisestatic]

.avatar img:hover {свойства} в свойствах задаете оригинальный размер и прозрачность 1.

можете пример привести, я не знаю, как свойства прописывать (оригинальный размер, н-р), в css плохо разбираюсь, пожалуйста

про задание полупрозрачности есть в эпиграфе.

т.е.
#page-c .avatar {-moz-opacity:.50 !important;opacity:.50 !important; filter:alpha(opacity=50);} ?

[Feleks]

только .avatar img {-moz-opacity:.50 !important;opacity:.50 !important; filter:alpha(opacity=50);}
при навидении будет так
.avatar img:hover {-moz-opacity:.1.0 !important;opacity:.1.0 !important; filter:alpha(opacity=100);}

ширина прописывается через width
например width:100px

[cerisestatic]

Feleks
спасибо

[Orm-Dian]

а можно сделать так, чтобы это свойство относилось ко всем картинкам, а не только к аватарам?
заранее спасибо)

[Aloria]

Orm-Dian, пропишите для тега img.

[cerisestatic]

Orm-Dian, лично я не знаю, вам, наверное, лучше отдельным постом задать вопрос)

[Orm-Dian]

спасибо, задам.

[Orm-Dian]

Aloria - э, пардон. не заметила. а как прописать?
img:hover {opacity: 1.0} - так пробовала, но не работает. а по-другому я не знаю как.

[Aloria]

Orm-Dian, надо так же, как написали выше, только для тега img вообще, а не для тех картинок, которым прописан класс .avatar, т.е.:

img {-moz-opacity:.50 !important;opacity:.50 !important; filter:alpha(opacity=50);}
img:hover {-moz-opacity:.1.0 !important;opacity:.1.0 !important; filter:alpha(opacity=100);}

[Orm-Dian]

Aloria - скопировала этот код, но почему-то не работает((

[Aloria]

Orm-Dian, нажмите Ctrl+F5.
Первая часть точно работает, картинки становятся полупрозрачными. Но вот при наведении ничего не меняется, почему - хз, пытаюсь понять.

[Orm-Dian]

да, первая часть работает. а вот наведение ничего не дает.
может это вообще невозможно?

[Aloria]

Orm-Dian, скажем так: сделать при наведении картинку непрозрачной невозможно с помощью этого кода, судя по всему. Можно сделать наоборот: чтоб при наведении она становилась полупрозрачной, а в обычном состоянии - обычной.

[Aloria]

В ИЕ работает, к слову, и тот код, что выше. А вот в ФФ и Опере - нет.

[Orm-Dian]

Aloria у меня как раз ФФ. просто у меня прозрачность задана всему содержанию поста, а хочется, чтобы картинки можно было просматривать в обычном виде.
ну ладно, буду еще искать варианты.

[Aloria]

Orm-Dian, ээээ... Задайте полупрозрачный фон своим постам (сделайте полупрозрачную картинку в фотошопе и сохраните в png), тогда полупрозрачность будет распространяться только на фон, но не затронет шрифты и фото.

[Orm-Dian]

ну, как вариант. может попробую, спасибо)

[Orm-Dian]

написала вот такой код, он работает. правда, прозрачность исчезает не до конца и затрагивает не только изображения, но и остальной пост, включая текст и аватары.

.singlePost {-moz-opacity:.80 !important;opacity:.80 !important; filter:alpha(opacity=80);}
.singlePost:hover {-moz-opacity:1.0 !important;opacity:1.0 !important; filter:alpha(opacity=100);}

меня пока устраивает. может кому еще пригодится.

извиниет ТТ а как все таки сделать "аватар полупрозрачным в обычном состоянии, а при наведении так, чтоб он отображался нормально, обычно, без полупрозрачности?"
еще не до конца разобрался - не могли бы вы помочь с кодом ?

[Aloria]

H.e.r.o.i.n, выше написан код несколько раз и указано, что он работает только в ИЕ.

я только что заходил к человеку через ФаерФокс - у него такая штука работает

[Aloria]

H.e.r.o.i.n, ссылку.

[Min Young-nim]

2. как сделать аватар полупрозрачным в обычном состоянии, а при наведении так, чтоб он отображался нормально, обычно, без полупрозрачности?

лично у меня эта вещь прописана следующим образом:
.avatar img {opacity: 0.5;}
.avatar img:hover {opacity: 1.0;}
По этому же принципу прописывается полупрозрачность для всех картинок в посте:
img {opacity: 0.5; }
img:hover {opacity: 1.0}