The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

avatar hover effect

View previous topic View next topic Go down

Solved avatar hover effect

Post by iamzildjian on November 2nd 2012, 10:34 am

regarding this link http://help.forumotion.com/t114403-avatar-effect is there any codes for punbb??

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Solved Re: avatar hover effect

Post by Base on November 2nd 2012, 8:05 pm

Hi, for the punBB version please see the post below.

For phpBB 3:

Code:
.postprofile dt img{
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s; 
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform; 
  overflow:hidden;
}
.postprofile dt img:hover{
    -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
}

I found this code pretty cool. Smile

Edit: I misread your forum version in your post. But hey, here's the phpBB 3 one should anyone else need it.


Last edited by Base on November 2nd 2012, 8:27 pm; edited 1 time in total

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Solved Re: avatar hover effect

Post by levy on November 2nd 2012, 8:24 pm

Try this for PunBB

Code:

.pun fieldset, .pun img{
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s; 
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform; 
  overflow:hidden;
}
.pun fieldset, .pun img:hover{
    -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
}

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: avatar hover effect

Post by iamzildjian on November 5th 2012, 11:06 am

RicYiu wrote:Try this for PunBB

Code:

.pun fieldset, .pun img{
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s; 
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform; 
  overflow:hidden;
}
.pun fieldset, .pun img:hover{
    -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
}


its working... but the problem is the rank image also affects the hover effect.. i only want the avatar hover effect

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Solved Re: avatar hover effect

Post by Sanket on November 6th 2012, 8:07 am

Administration Panel> Display>Templates>viewtopic_body

Change this:

Code:
{postrow.displayed.POSTER_AVATAR}

With this:

Code:
<span class="res">{postrow.displayed.POSTER_AVATAR}</span>

Save and then Publish the templates.

Than add this to CSS.
Code:
.res img{
-webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  overflow:hidden;
}
.res img:hover{
-webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
}

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: avatar hover effect

Post by iamzildjian on November 6th 2012, 10:52 am

working.. thanks sanket Smile

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Solved Re: avatar hover effect

Post by Sanket on November 9th 2012, 7:14 am

Topic Solved & Locked

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum