Pop-up profile field on avatar (MyBB)
When you hover over the avatar, the content of the additional field pops up.
Fade in animation
Код: .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
Код: .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
Код: .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:
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:
|
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.