• You need 5 posts to download resources. You can only download 2 resources per day. To remove these limits consider upgrading.

XF An effective avatar

one_finger_man

Verified
LV
0
 
Joined
Mar 23, 2023
Messages
28
Reaction score
16
Awards
3
give you a nice animation effect with your mouse on the avatar.

Simply paste the following css codes into the extra.less template of your theme.

4355-10005909e748c910bacdf7c3e38e09aa.gif

Code:
/*avatar animation*/
.message-avatar-wrapper .avatar:before,
.message-avatar-wrapper .avatar:after{
    border-color: #00c5de;
}
.message-avatar-wrapper a:before,
.message-avatar-wrapper a:after{
    content: "";
    display: block;
    position: absolute;
    background: transparent;
    top: 0; bottom: 0; left: 0; right: 0;
    border-radius: 5%; /*Do not touch this setting if you have an oval square or rectangle avatar. If you have an avatar, simply change the setting to "50%".*/
    transition: .3s all;
    border: 2px solid;
}
.message-avatar-wrapper a:hover:after{
   -webkit-transform: scale(1.5);
}
.message-avatar-wrapper a:hover:before{
    -webkit-transform: scale(2);
    transition: .3s all;
    opacity: 0;
}
/*avatar animation end*/

 
Last edited by a moderator:

Divo

Verified
LV
0
 
Joined
Mar 23, 2023
Messages
30
Reaction score
7
Age
26
That looks pretty cool. I am gonna try this out. I wonder if this will work with IPS?

 

Nick

Developer
Banned User
LV
0
 
Joined
Feb 7, 2023
Messages
491
Reaction score
128
Awards
14
That looks pretty cool. I am gonna try this out. I wonder if this will work with IPS?
That would be pretty cool if it did, I am gonna test some of the coding and see if I can do some edits to it.

 
Top