[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="free">

<a class="tip" id="cover" title="Всплывающее поле профиля на аватаре">
  <div id="icon"></div>
  <img src="https://forumuploads.ru/uploads/0007/e3/f7/2/829725.gif" class="postimg">
</a>

<div id="cover-block">
Дата: 17.08.2020<br>
Автор: <a href="/profile.php?id=2" target="_blank">Герда</a><br>
Бесплатный код<br>
Описание: При наведении курсора на аватар, всплывает содержимое дополнительного поля.
</div>

</div>

<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #26af33;
background-color: rgba(38,175,51,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(38,175,51,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(38,175,51,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(38,175,51,0.8); color: #fff !important;}
#pun .punbb .post-content hr {border: 3px solid #279933;}
.post-content td {background-color: rgb(0,0,0,0.5) !important;}
.visible .quote-box {background-color: rgba(0,0,0,0.5);}
</style>[/html]

Коды и описание

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

https://forumuploads.ru/uploads/0007/e3/f7/2/74062.gif

Скрытый текст:

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

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

https://forumuploads.ru/uploads/0007/e3/f7/2/186892.gif

Скрытый текст:

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

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

https://forumuploads.ru/uploads/0007/e3/f7/2/68616.gif

Скрытый текст:

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

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

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

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

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

rgba(255,255,255,0.5)

Синяя цифра - это прозрачность. Она может варьироваться от 0 до 1. Процент прозрачности указывается через точку, например: 0.68
Красные цифры - код цвета RGB. Чтобы подобрать другие цвета, вы можете загуглить "цвета RGB" или воспользоваться фотошопом:
https://forumuploads.ru/uploads/0007/e3/f7/2/127821.jpg
В данном примере этот оттенок синего будет вставляться цифрами 46, 139, 174

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

https://forumuploads.ru/uploads/0007/e3/f7/2/265053.jpg

Скрытый текст:

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

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

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

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

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

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