Jump to content


Photo
- - - - -

social icon fade


  • Please log in to reply
9 replies to this topic

#1 thumbstorm12

thumbstorm12

    Newbie

  • Members
  • 7 posts

Posted 13 April 2012 - 08:43 PM

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.

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 April 2012 - 09:04 PM

Do you have Firebug for Firefox? If not, I'd suggest you install it from

Please Login or Register to see this Hidden Content

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?

#3 thumbstorm12

thumbstorm12

    Newbie

  • Members
  • 7 posts

Posted 14 April 2012 - 02:49 AM

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?

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 14 April 2012 - 04:42 PM

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.

#5 thumbstorm12

thumbstorm12

    Newbie

  • Members
  • 7 posts

Posted 17 April 2012 - 09:15 PM

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

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 April 2012 - 02:26 AM

Try adding this:

Please Login or Register to see this Hidden Content



#7 thumbstorm12

thumbstorm12

    Newbie

  • Members
  • 7 posts

Posted 18 April 2012 - 04:12 PM

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

#8 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 18 April 2012 - 04:19 PM

According to your site's CSS, the CSS for that section is:

Please Login or Register to see this Hidden Content


So the opacity is not taking affect. You may need to add !important to it.

#9 thumbstorm12

thumbstorm12

    Newbie

  • Members
  • 7 posts

Posted 18 April 2012 - 04:55 PM

Awesome The !important worked. Thank You so much.

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 April 2012 - 06:29 PM

Glad that worked for you.