• 0
Sign in to follow this  
Followers 0

social icon fade

Question

Posted · Report post

Hello, I have the facebook and twitter icons on my site. They start out faded at .5 and go to 1.0 when you hover. I would like them to be at 1.0 all the time. I figured out how to get them to start at 1.0 but when you hover and then move the mouse off of them the icon goes back to .5. Any way to fix this? thanks for any help.

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

Do you have Firebug for Firefox? If not, I'd suggest you install it from http://www.getfirebug.com. Using it, I see that your branding image extends at 100% over the Facebook icon, possibly creating a conflict. How did you position the icons? With settings or CSS? I think the problem may be in their z-index. Are you familiar with that CSS element?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yep, I'm using firebug. That's how I figured out how to make it start at 1.0. I'm not very familiar with CSS. The icons were added by pagelines, all I did was enter my twitter and facebook info in the header and footer tab under the global settings. What's messing me up is it changes on when my mouse leaves the button and I can't figure out how to access whatever is causing it to change opacity. Could it be javascript or jquery?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What CSS fix did you use to get them to start at 1.0? The fade is being controlled with CSS and no Javascript or jquery, so a CSS solution should do the trick.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I put the following into the custom code section: .icons a { opacity: 1.0; }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try adding this: [code] .icons a:hover { opacity: 1.0; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Still doesn't work. Is there a CSS equivalent to OnMouseLeave?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

According to your site's CSS, the CSS for that section is: [code].icons a { display: block; float: right; height: 24px; margin-left: 8px; opacity: 0.5; text-align: right; width: 24px; }[/code] So the opacity is not taking affect. You may need to add [b]!important[/b] to it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Awesome The !important worked. Thank You so much.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Glad that worked for you.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0