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.

Icon transition!

View previous topic View next topic Go down

Solved Icon transition!

Post by DeathDunk98* on April 5th 2014, 6:42 pm

Here's the code I used, the CSS Code worked fine on the other options but not on the transition! To be more specific I want the transition same as in forumotion ?
Code:
#social-widget img {
-moz-transition-duration: 400ms;
-o-transition-duration: 400ms;
-webkit-transition-duration: 400ms;
max-height: 53px;
transition-duration: 400ms;
vertical-align: middle;
}


Last edited by andiikadriu on April 5th 2014, 9:54 pm; edited 1 time in total

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: Icon transition!

Post by Ange Tuteur on April 5th 2014, 7:54 pm

Hi,

To make an element dynamically move on mouseover you need to use transition and transform.

First you must place a transition on your element :

Transition values can be made in decimal or milliseconds. This is the time it takes to complete an event.
Code:
img { transition:400ms }

Lastly you must add your event properties :

On hover of an image it will rotate 360 degrees, this value can be changed to any number you wish.
Code:
img:hover { transform:rotate(360deg); }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Icon transition!

Post by DeathDunk98* on April 5th 2014, 8:55 pm

I understanded you theory, but sorry Im a beginner can you just tell me where do I have to put the codes for those 3 Icons on my forum, to hover like I want ?? forum url: http://www.islamishendrit.halofight.com

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: Icon transition!

Post by Ange Tuteur on April 5th 2014, 9:14 pm

Add this to your CSS :
Code:
#social-widget img { transition:400ms }
#social-widget img:hover { transform:rotate(10deg) }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Icon transition!

Post by DeathDunk98* on April 5th 2014, 9:38 pm

why the Transition doesn't show on OPERA ?

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: Icon transition!

Post by Ange Tuteur on April 5th 2014, 9:43 pm

Change the transition CSS to :
Code:
#social-widget img {
transition-duration:400ms;
-moz-transition-duration: 400ms;
-ms-transition-duration:400ms;
-o-transition-duration: 400ms;
-webkit-transition-duration: 400ms;
}

oh, and your transform CSS to :
Code:
#social-widget img:hover {
transform:rotate(10deg);
-moz-transform:rotate(10deg);
-ms-transform:rotate(10deg);
-o-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
}

I forgot to add those.


Last edited by Ange Tuteur on April 5th 2014, 9:46 pm; edited 1 time in total

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Icon transition!

Post by Sir Chivas™ on April 5th 2014, 9:44 pm

Codes removed


Ange provided them correctly.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Icon transition!

Post by DeathDunk98* on April 5th 2014, 9:48 pm

Perfect! TOPIC SOLVED!

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: Icon transition!

Post by Sir Chivas™ on April 6th 2014, 5:11 am

Topic Solved & Locked.

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

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