Show Thread Enhancements - [CM] Posbit Avatar Hover (Turns 360+ Effect) vB 3.8.x

This is a very small modification and works with hovering your mouse over an Avatar! Location in Postbit or Posbit Legacy template! It will make your avatar turn 360 Degrees all the way arround, and back to normal! Only by mouse hovering! This mod is only for vBulletin 3.8 and 4.x! Now I have also a ZOOM OUT EFFECT code added !

Modification is only visible for users in Firefox, Safari, Chrome & Opera! Does sadly not work for users using Internet Explorer!

DEMO HERE

For vBulletin 4.x Click HERE

Check Example Images Below, Befor Install

2 Template Edits

2 different Effects 360 Degrees Turn Effect & Zoom Out Effect

360 Degrees Turn Effect



Zoom out Effect


This Tutorial is only showing the code for 360 Degrees Turn Effect.You can find the code for the ZOOM OUT EFFECT Below in the Extras Section!

=============== Tutorial Starts ===============

Step 1: First Go to your ADMINCP, find Styles & Templates, and then click on Style Manager!

Now on your right side you should see the Templates that you have, On the template that you use, Click on the dropdown to your right, and choose "MAIN CSS"!

Step 2: Scroll all the way down to your "Additional CSS" and past the code below, at the bottom of all the other codes.

Code to add in Additional CSS:

PHP Code:

.myavatar:hover { 
 transition: all 3s ease; 
-webkit-transition: all 3s ease; 
-moz-transition: all 3s ease; transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-webkit-transform:rotate(360deg); position:relative;
} 


Step 3: Now go to your Styles & Templates, and again click on Style Manager!
And on again on your right side choose "Edit Template" in the dropdown!

Now in your templates, look for Postbit Templates, and inside the you must decide which Template you use, if its Posbit or Postbit Legacy, In my case I use "Postbit Legacy", but as Default vBulletin is set to "Postbit"

So go a head and click on one of them, depends on which one you use!

Step 4: In your Postbit template find the 2 lines below.

Code to find:

PHP Code:

<if condition="$show['avatar']">
    <div class="smallfont"> 


Now replace it with the code below.

Replace With:

PHP Code:

<if condition="$show['avatar']">
<div class="smallfont myavatar"> 


And dont worry, it will not make any further conflicts with your template, Not even later, if you upgrade your board!

Click Save, and your done!

Please Notice, if you use this mod, make sure to click install, if you later needed support for this mod!

=============== Tutorial Ends ===============


EXTRAS & OPTIONAL:

Below you will see the code for the ZOOM OUT EFFECT!

Zoom Out Effect:

PHP Code:

.myavatar:hover { 
opacity: 1; filter: alpha(opacity=100);
transition: all 2s ease; 
-webkit-transition: all 2s ease; 
-moz-transition: all 2s ease;
transform:rotate(0deg); 
-moz-transform:rotate(0deg); 
-webkit-transform:rotate(0deg);
transform: scale(1.5); 
-webkit-transform: scale(1.5); 
-moz-transform: scale(1.5);
position:relative;
} 


[New Joe]

Anyone know how to make this work for vb4?

[Midohash]

Thank you, but what is the benefit from rotating the avatar 360 degrees?

[ChiNa]

Now also a Zoom effect added!

And here is the mod for vBulletin 4.x, Published Today:
https://vborg.vbsupport.ru/showthread.php?p=2354464

Well its only to make your posts a bit Fancy! As you can see this is only a Template Modification, and not an ADDON!, So there is not much benifits when you make a Template Modification!

[3raq4all]

Thank you

[tehPARADOX]

Thanks!

[ChiNa]

Originally Posted by New Joe

Anyone know how to make this work for vb4?

Now Also For vBulletin 4.x / CLICK HERE

You are welcome guys, Make sure click on Installed!
I see many thanks, and only 1 Installs! And thats actually myself, becaue I have it installed too! Thats all what you guys need to show your support!

[mohammed146]

nice man

[SIINSI]

Installed. Thanks! Changed "div" to "td" on 3.7X.

[ChiNa]

Originally Posted by SIINSI

Installed. Thanks! Changed "div" to "td" on 3.7X.

Hi buddy, the Code just got updated after your reply! Please try to change the code to the updated one! Its only 1 line which should be change in your Postbit or Postbit_Legacy! No changes in your your MAIN CSS !

Look in your Postbit or Postbit_legacy for the following code below:

Find code:
<if condition="$show['avatar']">
<div class="smallfont">

Now replace it with the code below:

Replace with:
<if condition="$show['avatar']">
<div class="smallfont myavatar">

Done.. thanks for clicking on the Install button!