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;
} 


[matrex722]

Wow thanks for this

[al2thero]

Works great many thanks