How to apply this CSS code to work for avatars?
+2
Sir Chivas™
omega.exe
6 posters
Page 1 of 1
How to apply this CSS code to work for avatars?
I was just wondering how to apply the code below to the forum page avatars. The code makes it so that the avatars rotate when you hover on them. I have an example link here: http://duelacademylegends.forumotion.com/t750-dal-duel-academy-legends-rules-and-characters#4561 . How can i use the below code to make all the avatars on every forum page (I will have an image below specifying my targets) spin? I already know that the code below just tilts the picture, and I already know how to modify the values to make it spin. I just need to know how to apply it to every avatar on every page like the one shown in the link and the picture. Thank you.
The code:
That is all.
The code:
- Code:
#ex4 {
width: 800px;
margin: 0 auto;
}
#ex4 img {
margin: 20px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#ex4 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
That is all.
omega.exe- New Member
- Posts : 4
Reputation : 1
Language : English
Re: How to apply this CSS code to work for avatars?
Am I supposed to put anything else for the code? It is not working. Is there anything else I have to do other than putting in the code you gave me t othe CSS stylesheets?
omega.exe- New Member
- Posts : 4
Reputation : 1
Language : English
omega.exe- New Member
- Posts : 4
Reputation : 1
Language : English
Re: How to apply this CSS code to work for avatars?
Try this, Link Removed ~ Rideem3
Sir Chivas™- Helper
- Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Re: How to apply this CSS code to work for avatars?
mhm yea me and him are friends (omega) and your code actually doesnt work.... (to rideem)
Re: How to apply this CSS code to work for avatars?
Add that to your css. It shall work for phpbb2.
- Code:
span.postdetails a 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;
}
span.postdetails a img:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: How to apply this CSS code to work for avatars?
Sanket can you make me code for PunBB, this dont work. tnx
Re: How to apply this CSS code to work for avatars?
Administration Panel> Display>Templates>viewtopic_bodyBimbasVG wrote:Sanket can you make me code for PunBB, this dont work. tnx
Change this:
- Code:
{postrow.displayed.POSTER_AVATAR}
With this:
- Code:
<span class="avi">{postrow.displayed.POSTER_AVATAR}</span>
Save and then Publish the templates.
Than add this to CSS.
- Code:
.avi 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;
}
.avi img:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: How to apply this CSS code to work for avatars?
BimbasVG, glad its solved for you.
omega.exe, is this solved for you?
omega.exe, is this solved for you?
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: How to apply this CSS code to work for avatars?
please solve it for him me and him own the same forum
Re: How to apply this CSS code to work for avatars?
@Sanket
Yup! Solved for me! Thank you for the help and the relatively quick reply!
Yup! Solved for me! Thank you for the help and the relatively quick reply!
omega.exe- New Member
- Posts : 4
Reputation : 1
Language : English
Re: How to apply this CSS code to work for avatars?
sanket can u make it rounded 360degress ? punbb ..
Re: How to apply this CSS code to work for avatars?
https://help.forumotion.com/t113577-how-to-apply-this-css-code-to-work-for-avatars#744254tommycoo wrote:sanket can u make it rounded 360degress ? punbb ..
That one is for PunBB.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum