logo hover effect

Go down

logo hover effect

Post by iamzildjian on Thu Aug 09, 2012 3: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 Thu Aug 09, 2012 5: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.

avatar
SLGray
Administrator
Administrator

Male Posts : 43109
Reputation : 3054
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: logo hover effect

Post by iamzildjian on Fri Aug 10, 2012 1: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 Fri Aug 10, 2012 7:26 am

Add this in your css

Code:
#i_logo:hover {
    opacity: 0.8;
}
avatar
Mati
Active Poster

Posts : 1906
Reputation : 291
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

Re: logo hover effect

Post by iamzildjian on Fri Aug 10, 2012 9:12 am

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 Fri Aug 10, 2012 9:33 am

what do you mean? Please provide your forum URL.
avatar
Mati
Active Poster

Posts : 1906
Reputation : 291
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

Re: logo hover effect

Post by iamzildjian on Fri Aug 10, 2012 9:55 am


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 Sat Aug 11, 2012 11:35 am

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 Mon Aug 13, 2012 10:02 am

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 Mon Aug 13, 2012 10:23 am

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.
avatar
BlackScorpion
Graphic Designer
Graphic Designer

Male Posts : 5728
Reputation : 792
Language : English
Location : USA

http://help.forumotion.com

Back to top Go down

Re: logo hover effect

Post by smerf95 on Mon Aug 13, 2012 10:37 am

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="http://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 Wed Aug 15, 2012 2: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 Wed Aug 15, 2012 2: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;
}
avatar
Sir Chivas™
Support Moderator
Support Moderator

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

Back to top Go down

Re: logo hover effect

Post by iamzildjian on Sat Aug 18, 2012 10:05 am

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 Sun Aug 19, 2012 1: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 Sun Aug 19, 2012 1: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 Wed Aug 22, 2012 12: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 Fri Aug 24, 2012 2:18 am

Topic Solved & Locked


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

avatar
SLGray
Administrator
Administrator

Male Posts : 43109
Reputation : 3054
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Back to top


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