Print this Post

Adding hover effect for Graphene social media icons

Social media icons in the Graphene top bar looks more elegantly if you add hover effect to it. For example, if you mouseover the twitter icon in top bar, it gets highlighted. Move your pointer over social media icons in my top bar for a live action or look at these images.

This is how social media icons look usually.

Graphene social media icons in normal condition.

Graphene social media icons in normal condition.

This is a good example for hovering effect in top bar icons. Look at the twitter icon which is being highlighted.

Graphene social media icons on hovering.

Hover effect when mouseovering twitter icon.

Holy $***! How did you do that? I want to try this in my site!!
Well, that’s the most asked question on my private mail in this week. This can be done by adding opacity property to the top bar icons. Here is a ready to use CSS code. If you’re using child theme, then add this to your style sheet. Otherwise go to Graphene options –> Display –> Custom CSS and put this there.


#profiles a {
#profiles a:hover{

Here I’m using opacity 0.6 for normal elements and 1.0 for hovering effect. You can change this to suite your needs.

Short Link:

About the author

Prasanna SP

Student | WordPress Dev | Tech Blogger | Interested in GNU/Linux, FOSS, PHP, Drupal, WordPress, Ethical hacking, Photography, Painting, Literature etc..

Permanent link to this article: http://www.prasannasp.net/adding-hover-effect-for-graphene-social-media-icons/


Skip to comment form

  1. Helmut

    THX! Worx GREAT! EASY to do! ๐Ÿ˜‰

    Where I do ad some space about the Content..?
    (Like on this blog)

    1. Prasanna SP

      Thanks Helmut!

      To add some space at the top of the page, add this to Custom CSS,

      body {
          padding-top: 20px;
  2. Manuel

    thanks for this post. tried it on my site and it worked. I simply love it

  3. Manuel

    does it work with other themes too?

    1. Prasanna SP

      Yes, it should work with other themes as well. But, you’ve to target the correct class.

  4. Medical Billing and Coding School

    Thanks will use this on my site!

  5. Ian Walters

    Just to let you know that #rss has changed to #top-bar in later versions of Graphene.

    Still works a treat with that minor change…

    #top-bar a {

    #top-bar a:hover{

    1. Prasanna SP

      Hi, Ian! #rss is now changed to #profiles. Thanks for your notification. I’ve updated the post.

  6. Josh

    Love all your hover affects Prasanna. Subtle, yet effective!! I especially like the widgets and the footer hovers. Nice ๐Ÿ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *

Please put your code snippet between <code> and </code>. Comment moderation is in use. Please do not submit your comment twice -- it will appear shortly.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.