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.

logo hover effect

View previous topic View next topic Go down

logo hover effect

Post by iamzildjian on August 9th 2012, 9:04 pm

how to do this one? > www.teamanonymous.mrforum.net when you hover the logo the image is zooming out.

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: logo hover effect

Post by SLGray on August 9th 2012, 11:10 pm

Do you mean how the banner/logo fades in and out when you hover over it?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: logo hover effect

Post by iamzildjian on August 10th 2012, 7:11 am

yes exactly. just like that forum i provided

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: logo hover effect

Post by Mati on August 10th 2012, 1:26 pm

Add this in your css

Code:
#i_logo:hover {
    opacity: 0.8;
}

Mati
Active Poster

Posts : 1882
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Re: logo hover effect

Post by iamzildjian on August 10th 2012, 3:12 pm

Matti_7 wrote:Add this in your css

Code:
#i_logo:hover {
    opacity: 0.8;
}



my logo is only fading...

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: logo hover effect

Post by Mati on August 10th 2012, 3:33 pm

what do you mean? Please provide your forum URL.

Mati
Active Poster

Posts : 1882
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Re: logo hover effect

Post by iamzildjian on August 10th 2012, 3:55 pm


iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: logo hover effect

Post by iamzildjian on August 11th 2012, 5:35 pm

so now how can i do that?? any css codes?

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: logo hover effect

Post by iamzildjian on August 13th 2012, 4:02 pm

Bump

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: logo hover effect

Post by BlackScorpion on August 13th 2012, 4:23 pm

I believe what iamzildjan is trying to get is both the fading and animation motion of the banner where it moves back and forth when you mouseover. Like in the site that he linked.

BlackScorpion
Graphic Designer
Graphic Designer

Male Posts : 4557
Reputation : 670
Language : English
Location : USA

http://help.forumotion.com

Back to top Go down

Re: logo hover effect

Post by smerf95 on August 13th 2012, 4:37 pm

Bit from their page source -
<table class="bodylinewidth" width="85%" cellspacing="0" cellpadding="10" border="0" align="center"><tr><td class="bodyline"><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center" width="100%" valign="middle"><a href="/forum"><img src="https://i40.servimg.com/u/f40/17/50/58/45/314.jpg" id="i_logo" border="0" alt="Team Anonymous" vspace="1" /></a><br /><div class="maintitle"><h1></h1></div><br /> Maybe this will help Very Happy Change stuff around and try it out ;p

smerf95
Forumember

Male Posts : 208
Reputation : 3
Language : Polish

http://sorta.forumpl.net

Back to top Go down

Re: logo hover effect

Post by iamzildjian on August 15th 2012, 8:48 pm

its not working

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: logo hover effect

Post by Sir Chivas™ on August 15th 2012, 8:59 pm

Try this codes.

Code:
#i_logo:hover {
transition-duration: 1.0s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 1.0;
filter: alpha(opacity=40);
}
Code:

#i_logo {
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 0.6;
filter: alpha(opacity=40);
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}

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

Re: logo hover effect

Post by iamzildjian on August 18th 2012, 4:05 pm

its not working

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: logo hover effect

Post by iamzildjian on August 19th 2012, 7:09 pm

Bump

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: logo hover effect

Post by Rainbow Zebra on August 19th 2012, 7:11 pm

Just an add on to this question, how can I make it so when you hover over an image on a logo, it moves or hovers....

This might be associated with a Photoshop/GIMP effect, but if it can be answered, thanks in advance.

Rainbow Zebra
Forumember

Female Posts : 46
Reputation : 1
Language : English

Back to top Go down

Re: logo hover effect

Post by iamzildjian on August 22nd 2012, 6:20 pm

Mark this now as solved. thank You guys

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: logo hover effect

Post by SLGray on August 24th 2012, 8:18 am

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.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