Help with Social Media Hover

Developer Support CMS Development
4

Hi Mariana!

As ndwilliams3 mentioned, this is easily done with CSS, some benefits are load time, and the fact that you won’t need to rely on JS to make sure these hovers work correctly. I quickly built out an example that matches the one you use on the homepage. Feel free to try it out :slightly_smiling_face:

HTML

<!--Facebook-->
<a target="_blank" class="social-icons facebook" href="https://www.facebook.com/apogeeITservices">
</a>

<!--Twitter-->
<a target="_blank" class="social-icons twitter" href="https://twitter.com/apogeeITS">
</a>

<!--Linkedin-->
<a target="_blank" class="social-icons linkedin" href="https://www.linkedin.com/company/apogee-it-services">
</a>

CSS

.social-icons{
 width:45px;
 height:40px;
 display:block;
 float:left;
 background-repeat:no-repeat !important;
}

.facebook{ background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-facebook.png");
}

.facebook:hover{
background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-facebook-hover.png");
}

.twitter{ background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-twitter.png");
}

.twitter:hover{ background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-twitter-hover.png");
}

.linkedin{
background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-linkedin.png");
}

.linkedin:hover{ background:url("http://cdn2.hubspot.net/hubfs/492950/Apogee/Icons/Social_Media_Icons/Apogee-website-linkedin-hover.png");
}

Also, here is a JSFiddle where you can see it in action!

I hope this helps, let me know if you have any questions!

-- Ty