Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.

Анимация с плавным появлением

Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Анимация с плавным разворачиванием

Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Совмещенный вариант анимации: разворачивание + появление

Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Пояснения и настройки
Куда ставить?
Все коды, которые выложены вставляются в Администрирование > Свой стиль
ИЛИ вы можете вставлять их в Администрирование > Настройки > HTML-верх, но МЕЖДУ тегами <style>:

Код:

<style>
тут ваши коды
</style>

Как поставить номер доп.поля?
Найдите в кодах .pa-fld2 (встречается ТРИ раза)
замените красную цифру на номер вашего доп.поля
Можно, кстати, выводить на аватарке не доп.поле, а другое. Для этого вставьте вместо pa-fld2 нужный селектор поля. Например, pa-title перенесет на аватарку статус.

Где брать коды для полупрозрачного цвета фона?
Полупрозрачные цвета ставятся вот таким кодом:

rgba(255,255,255,0.5)

Синяя цифра - это прозрачность. Она может варьироваться от 0 до 1. Процент прозрачности указывается через точку, например: 0.68
Красные цифры - код цвета RGB. Чтобы подобрать другие цвета, вы можете загуглить "цвета RGB" или воспользоваться фотошопом:

В данном примере этот оттенок синего будет вставляться цифрами 46, 139, 174

Как правильно позиционировать доп.поле?
Чтобы не путаться с анимацией воспользуйтесь кодом с настройками дизайна доп.поля:

Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Когда вы убедитесь, что дополнительное поле ровно "встало" на аватарку, добавляйте анимацию.
В первом варианте анимации добавляется прозрачность:

Код:

opacity: 0;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.pa-fld2:hover {
opacity: 1;
}

Во втором варианте мы меняем высоту на 0px, а нужную нам высоту переносим в анимацию при наведении:

Код:

.pa-fld2:hover {
height: 295px; /* высота аватарки (МИНУС высота border-top) */
}

Третий вариант совмещает оба этих эффекта, поэтому нужно добавить и то, и другое.