XenForo Avatar animation on hovering

CR LEAKS · 2024-08-03T10:55:48+00:00

In extra.less: @background_color_1: #185886; .message-avatar-wrapper { a { position: relative; transition: 2s; padding: 3px; &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: @background_color_1; transition: 2s; transform: rotateX(90deg); z-index: -1; } &:after { transform: rotateY(90deg); content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: @background_color_1; transition: 2s; z-index: -1; } &:hover { &:before { transform: rotateX(0deg); } &:after { transform: rotateY(0deg); } z-index: 0; } } } .avatarWrapper { .avatar { position: relative; transition: 2s; padding: 3px; &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: @background_color_1; transition: 2s; transform: rotateX(90deg); z-index: -1; } &:after { transform: rotateY(90deg); content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: @background_color_1; transition: 2s; z-index: -1; } &:hover { &:before { transform: rotateX(0deg); } &:after { transform: rotateY(0deg); } z-index: 0; } } } .memberTooltip-avatar { a { position: relative; transition: 2s; padding: 3px; &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: @background_color_1; transition: 2s; transform: rotateX(90deg); z-index: -1; } &:after { transform: rotateY(90deg); content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: @background_color_1; transition: 2s; z-index: -1; } &:hover { &:before { transform: rotateX(0deg); } &:after { transform: rotateY(0deg); } z-index: 0; } } }

Random Topic

Thread starter CR LEAKS
Start date Aug 3, 2024

CR LEAKS

Administrative

Aug 3, 2024

In extra.less:

CSS:

Please, Log in or Register to view codes content!

You must log in or register to reply here.

Facebook X (Twitter) Reddit Pinterest Tumblr WhatsApp Email Link

Forums
Fivem Development
Fivem Scripts
Forums
Forum Leaks
XENFORO
Tips & Guides
Avatar animation on hovering

This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Accept Learn more…

Back

Top