Social Icons Hover Opacity

RichmondImage

I put this question out here a few weeks ago and didn't get any response, but luckily I managed to figure it out on my own (well with the internet) Here is the code I used to make my social icons opaque and then switch on hover. I used them on my homepage, but not the rest of the site (icons are in footer on homepage) but it should work anywhere.

.sm-page-widget-social-links.sm-social-links-large .sm-fonticon
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.sm-page-widget-social-links.sm-social-links-large .sm-fonticon:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

the "large" part of the code can be adjusted for whatever your icon size is set to

rhituraj

Thanks for the tip!

Darter02

Cool beans. I changed "sm-social-links-large" to "sm-social-links-small" and placed that code in my site-wide CSS. Worked!

aaronbrown

Any way to get it to transition smoothly in like an active link would with this code?

-webkit-transition:color 0.2s ease-in;
-moz-transition:color 0.2s ease-in;
transition:color 0.2s ease-in;

RichmondImage

I am sure that would work, although I am not entirely familiar with the webkit transition coding. Might need to change the color parameter to opacity. Not sure...

TerryRLowe

Works Great
This works perfectly.

Thanks!

aaronbrown

RichmondImage wrote: »

I am sure that would work, although I am not entirely familiar with the webkit transition coding. Might need to change the color parameter to opacity. Not sure...

Yup - that did the trick!
ease-out for the icons
ease-in for the hover using the transition:opacity.

Thanks for the nod in the right direction!

Retired UPSer

I've been waiting for someone to come up with this, Thanks.

RichmondImage

Update on this, I decided to try and use the webkit transition coding on the opacity hover, and I gotta say I'm fairly impressed with it. Try using this code, again adjusting for the icon size at the end of the div class id.

.sm-page-widget-social-links.sm-social-links-large .sm-fonticon
{
   opacity: .4;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.sm-page-widget-social-links.sm-social-links-large .sm-fonticon:hover
{
    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

you can change the timing on it where it says .25s but I wouldnt veer much past .2-.3, just my .02

toddbuchanan

RichmondImage wrote: »

Update on this, I decided to try and use the webkit transition coding on the opacity hover, and I gotta say I'm fairly impressed with it. Try using this code, again adjusting for the icon size at the end of the div class id.

.sm-page-widget-social-links.sm-social-links-large .sm-fonticon
{
   opacity: .4;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.sm-page-widget-social-links.sm-social-links-large .sm-fonticon:hover
{
    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

you can change the timing on it where it says .25s but I wouldnt veer much past .2-.3, just my .02

FYI - I added a little Scale transition to enlarge the icons when you hover...here is the code I used below (note it is for the small icons...change small to medium or large for your selection):

.sm-page-widget-social-links.sm-social-links-small .sm-fonticon
{
opacity: .4;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.sm-page-widget-social-links.sm-social-links-small .sm-fonticon:hover
{
opacity: 1;
-webkit-transform: scale(1.6);
-moz-transform: scale(1.6);
-o-transform: scale(1.6);
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}