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 Fri 2 Nov - 11:34

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 Fri 2 Nov - 21:05

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 Fri 2 Nov - 21:27; 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 Fri 2 Nov - 21:24

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 : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: avatar hover effect

Post by iamzildjian on Mon 5 Nov - 12:06

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 Tue 6 Nov - 9:07

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 Tue 6 Nov - 11:52

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 Fri 9 Nov - 8:14

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