Animation Avatar

[AdmiralFrost]

Hello All,
Hope this mod is not present already.
At once I will tell that effects are realized by means of CSS3 therefore will work only in modern supporting CSS3 browsers.
Lets Start!
ACP> Styles & Templates> [Your Style]> Edit Templates> Postbit.css
Add: .imgholder{
position:relative;
width:120px;
height:120px;
border-radius:100px;
float:left;
margin:40px 30px;
}
/* thumbnails style */
.imgholder img{
position:absolute;
left:0;
top:0;
width:120px;
height:120px;
z-index:5;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
opacity:0.3;
filter: alpha(opacity = 30);
box-shadow:0 0 5px #000;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;

transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
-moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);

transition:
opacity 1s,
transform 1s ease-in-out 0.3s;
-moz-transition:
opacity 1s,
-moz-transform 1s ease-in-out 0.3s;
-webkit-transition:
opacity 1s,
-webkit-transform 1s ease-in-out 0.3s;
}
.imgholder:hover img{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}

.imgholder figcaption{
position:absolute;
left:-5px;
top:40%;
width:130px;
color:#004E87;
font-weight:bold;
text-shadow:-1px -1px 0 #fff;
z-index:4;

transition:
top 0.5s ease-out;
-moz-transition:
top 0.5s ease-out;
-webkit-transition:
top 0.5s ease-out;
}
.imgholder:hover figcaption{
top:120%;
}
/* decorations style */
.imgholder .circle{
position:absolute;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder .outer1{
top:-8px;
left:-8px;
width:120px;
height:120px;
z-index:2;

border:8px solid;
border-color:#DEEBFC;
box-shadow:0 0 3px #AFD3FF;
-moz-ox-shadow:0 0 3px #AFD3FF;
-webkit-box-shadow:0 0 3px #AFD3FF;

background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );

transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);

transition:
transform 1.8s ease-in-out,
box-shadow 1s ease-out,
border-color 1.5s;
-moz-transition:
-moz-transform 1.8s ease-in-out,
-moz-box-shadow 1s ease-out,
border-color 1.5s;
-webkit-transition:
-webkit-transform 1.8s ease-in-out,
-webkit-box-shadow 1s ease-out,
border-color 1.5s;
}
.imgholder:hover .outer1{
border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
box-shadow:0 0 10px #0285E2;
-moz-box-shadow:0 0 10px #0285E2;
-webkit-box-shadow:0 0 10px #0285E2;
transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
.imgholder .outer2{
top:-18px;
left:-18px;
width:136px;
height:136px;
z-index:1;

border:10px solid;
border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
box-shadow:0 0 20px #8EB9FF;
-moz-box-shadow:0 0 20px #8EB9FF;
-webkit-box-shadow:0 0 20px #8EB9FF;
opacity:0;
filter: alpha(opacity = 0);

transform: scale(1.3,1.3) rotate(180deg);
-ms-transform: scale(1.3,1.3) rotate(180deg);
-moz-transform: scale(1.3,1.3) rotate(180deg);
-webkit-transform: scale(1.3,1.3) rotate(180deg);

transition:
opacity 0.5s,
transform 0.7s ease-out;
-moz-transition:
opacity 0.5s,
-moz-transform 0.7s ease-out;
-webkit-transition:
opacity 0.5s,
-webkit-transform 0.7s ease-out;
}
.imgholder:hover .outer2{
opacity:0.9;
filter: alpha(opacity = 90);
transform: scale(1,1) rotate(-10deg);
-ms-transform: scale(1,1) rotate(-10deg);
-moz-transform: scale(1,1) rotate(-10deg);
-webkit-transform: scale(1,1) rotate(-10deg);
}
Postbit_legacy
find code: <a class="postuseravatar" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
</a>
</vb:if>
and replace with: <div align="center" class="imgholder">
<div class="outer1 circle"/></div>
<div class="outer2 circle"/></div>
<figure>
<div class="postuseravatar1" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
<center>
<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}"/>
</center>
</div>
<figcaption class="caption">
<span class="username">
<div class="username_container">
{vb:raw post.musername}
</span>
</figcaption>
</figure>
</div>
Enjoy!

Demo: stopmalware.kz (http://stopmalware.kz/forum.php)

[baytalha]

Thanks is a very good

[killah360z]

the ones without a avatar
- posts are unreadable.

[AdmiralFrost]

the ones without a avatar
- posts are unreadable.
it is possible to use this plugin: https://vborg.vbsupport.ru/showthread.php?t=227947

[Asmod]

Is messing up my profile pages, any fix ? Till then il revert this...

[ForceHSS]

Is messing up my profile pages, any fix? Till then I will revert this...
Make sure your forum version is 4.1.x and not 4.2

[Asmod]

Hi again,

So is not working for 4.2 ? :( I really liked it...

[ckgb]

Aren't we missing

</vb:if>

At the end of the replacement?

How did you get it to work in IE 11? Mine works great in FF, Chrome, but IE does not allow for rotation.

[AdmiralFrost]

Asmod, perfectly works on 4.2.2

ckgb, I checked in IE 11 - everything is normal

[ForceHSS]

Asmod, perfectly works on 4.2.2

ckgb, I checked in IE 11 - everything is normal

Then you need to change the info above as it says 4.1.x

[Asmod]

AdmiralFrost i have done it but when i click on my name to go to my profile all is messed up - all others are fine.

[AdmiralFrost]

ForceHSS ok!

Asmod, give me link...

[Asmod]

WEhhh sorry guys for the trouble, must i have been blind ... fixed...

Ty AdmiralFrost for help :) - i have fixed it now, for some reason i replaced them again and now is fine :)

[ckgb]

Asmod, perfectly works on 4.2.2

ckgb, I checked in IE 11 - everything is normal

Yup your site does. Mine does not rotate in IE11. Therefore I asked.

Issue is on my side but its a bummer trying to figure this one out.

[dhonchik]

Big Thanks! 4.2.2 work nice!

but how remove user name on avatar?

[AdmiralFrost]

but how remove user name on avatar?
Edit Templates Postbit_legacy
find and delete code: <figcaption class="caption">
<span class="username">
<div class="username_container">
{vb:raw post.musername}
</span>
</figcaption>

[zanattana]

need help with this postbit legacy eTiKeT™

https://vborg.vbsupport.ru/external/2014/12/3.png
https://vborg.vbsupport.ru/external/2014/12/4.png