Pop-up profile field on avatar (MyBB)
When you hover over the avatar, the content of the additional field pops up.

Fade in animation

http://forumfiles.ru/uploads/0007/e3/f7/2/74062.gif

Код:
.post-author {position: relative;}
.pa-fld2 .fld-name {display: none;}
.pa-fld2 {
position: absolute;
top: 40px; /* top indent */
left: 13px; /* left indent */
padding: 0 5px !important; /* indentation of text from the edges of the avatar */
width: 190px; /* avatar width (MINUS padding width) */
height: 295px; /* avatar height (MINUS border-top height) */
background-color: rgba(255,255,255,0.5); /* background color */
border-top: 10px solid rgba(132, 128, 128, 0.6); /* border above frame text */
text-align: center; /* centered text (remove if not needed) */
opacity: 0;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.pa-fld2:hover {
opacity: 1;
}

Smooth unfolding animation

http://forumfiles.ru/uploads/0007/e3/f7/2/186892.gif

Код:
.post-author {position: relative;}
.pa-fld2 .fld-name {display: none;}
.pa-fld2 {
position: absolute;
overflow: hidden;
top: 40px; /* top indent */
left: 13px; /* left indent */
padding: 0 5px !important; /* indentation of text from the edges of the avatar */
width: 190px; /* avatar width (MINUS padding width) */
height: 0px; 
background-color: rgba(255,255,255,0.5); /* background color */
border-top: 10px solid rgba(132, 128, 128, 0.6); /* border above frame text */
text-align: center; /* centered text (remove if not needed) */
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.pa-fld2:hover {
height: 295px; /* avatar height (MINUS border-top height) */
}

Combined version of animation: unfolding + appearance

http://forumfiles.ru/uploads/0007/e3/f7/2/68616.gif

Код:
.post-author {position: relative;}
.pa-fld2 .fld-name {display: none;}
.pa-fld2 {
position: absolute;
overflow: hidden;
top: 40px; /* top indent */
left: 13px; /* left indent */
padding: 0 5px !important; /* indentation of text from the edges of the avatar */
width: 190px; /* avatar width (MINUS padding width) */
height: 0px; 
background-color: rgba(255,255,255,0.5); /* background color */
border-top: 10px solid rgba(132, 128, 128, 0.6); /* border above frame text */
text-align: center; /* centered text (remove if not needed) */
opacity: 0;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.pa-fld2:hover {
opacity: 1;
height: 295px; /* avatar height (MINUS border-top height) */
}

Explanations and settings
Where to put?
All codes that you see here are inserted in Administration > Custom style
OR you can paste them in Administration> Preferences> HTML-top, but BETWEEN <style> tags:

Код:
<style>
here are your codes
</style>

How do I add an additional field number?
Find in codes .pa-fld2 (THREE times)
replace the red number with your additional field number.
By the way, you can display not an additional field on the avatar, but something else. To do this, insert instead pa-fld2 desired field selector. For example, pa-title will transfer the status to the avatar.

Where can I get the codes for the translucent background color?
Translucent colors are set with the following code:

rgba(255,255,255,0.5)

The blue number is transparency. It can vary from 0 to 1. The percentage of transparency is indicated through a dot, for example: 0.68
The red numbers are the RGB color code. To find other colors, you can google "RGB colors" or use Photoshop:
http://forumfiles.ru/uploads/0007/e3/f7/2/127821.jpg
In this example, this shade of blue will be inserted in numbers 46, 139, 174

How to position the additional field correctly?
In order not to get confused with animation, use the code with the additional field design settings:

http://forumfiles.ru/uploads/0007/e3/f7/2/265053.jpg

.post-author {position: relative;}
.pa-fld2 .fld-name {display: none;}
.pa-fld2 {
position: absolute;
overflow: hidden;
top: 40px; /* top indent */
left: 13px; /* left indent */
padding: 0 5px !important; /* indentation of text from the edges of the avatar */
width: 190px; /* avatar width (MINUS padding width) */
height: 295px; /* avatar height (MINUS border-top height) */

background-color: rgba(255,255,255,0.5); /* background color */
border-top: 10px solid rgba(132, 128, 128, 0.6); /* border above frame text */
text-align: center; /* centered text (remove if not needed) */

}

When you are convinced that the additional field has exactly "stood" on the avatar, add animation.
The first animation adds transparency:

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

In the second option, we change the height to 0px, and the height we need is transferred to the animation on hover:

Код:
.pa-fld2:hover {
height: 295px; /* avatar height (MINUS border-top height) */
}

The third option combines both of these effects, so you need to add both.