Special Offer: Buy All 44 Premium WordPress Themes for Just $55. Learn more
No Comments

In general, in most of our premium themes when you hover the social icons (in header and footer), the icon color is being changed.

Is some cases, you may want to add appearing effect to tilt the social icons on hover. Here’s how it can be done:

  1. Navigate to Admin Panel -> Left Menu -> Appearance -> Editor
  2. Open your_theme/style.css
  3. If you want to apply the effect for header social icons insert the following code (i.e. in the end of the file):.header-social-widget a:hover {
    -webkit-transform:rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    }
  4. If you want to apply the effect for footer social icons insert the following code (i.e. in the end of the file):.footer-social-widget a:hover {
    -webkit-transform:rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    }
  5. If you want to apply the effect for social sharing icons after single post, insert the following code (i.e. in the end of the file):.social-sharing-box a:hover {
    -webkit-transform:rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    }
  6. Save Changes

Please Note: You can change the above value to any other value, i.e. instead of -20deg you can add -30deg or -40deg.

 



Best-selling Products:

Categories: WordPress Themes

Leave a Reply

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