WordPress.org

Forums

Responsive
Hover on social icons (9 posts)

  1. JeanJensenDK
    Member
    Posted 2 years ago #

    Hi there,

    I have made a new set of social icons: colored and greyscale. The shown icons is the greyscaled, and I'd like a hover-effect to show the colored icon.

    How?

    http://www.jeanjensen.dk, bottom right.

  2. varkeychaya
    Member
    Posted 2 years ago #

    You can use CSS to do the trick, check out http://www.w3schools.com/cssref/sel_hover.asp
    to get some idea of the hover selector and then you can add the css to your theme css or preferably to your child theme.

  3. JeanJensenDK
    Member
    Posted 2 years ago #

    Thanks, but... I can't find out what to change where...?

    /* =Social Icons
    -------------------------------------------------------------- */
    #footer .social-icons {
      list-style: none;
      line-height: normal;
      padding: 0;
      margin: 0;
      text-align: right;
    }
    
    #footer .yelp-icon,
    #footer .vimeo-icon,
    #footer .youtube-icon,
    #footer .twitter-icon,
    #footer .facebook-icon,
    #footer .linkedin-icon,
    #footer .rss-feed-icon,
    #footer .instagram-icon,
    #footer .pinterest-icon,
    #footer .foursquare-icon,
    #footer .google-plus-icon,
    #footer .stumble-upon-icon {
      display: inline;
      margin: 1px;
      padding-left: 3px;
    }
  4. varkeychaya
    Member
    Posted 2 years ago #

    Try this

    .twitter-icon{
    display: inline;
    margin: 1px;
    padding-left: 3px;
    height:24px;
    width:24px;
    background:transparent url('twitterbird.png') center top no-repeat;
    }

    .twittericon:hover {
    background-image: url('twitterbird_hover.png');
    }

  5. JeanJensenDK
    Member
    Posted 2 years ago #

    Thanks, it works just fine now, BUT BUT BUT - only underneath an icon I can't controle...

    I left the code in my child-theme, so you can see the effect.

    #footer .twitter-icon{display: inline; margin: 1px; padding-left: 3px; height:24px; width:24px; background:transparent url('http://jeanjensen.dk/wp-content/themes/responsive-child/core/icons/twitter-icon.png') center top no-repeat;}
    
    #footer .twitter-icon:hover {background-image: url('http://jeanjensen.dk/wp-content/themes/responsive-child/core/icons/twitter-icon-hover.png');}
  6. varkeychaya
    Member
    Posted 2 years ago #

    you can remove the img in the html.

  7. esmi
    Forum Moderator
    Posted 2 years ago #

    As per the theme developer's request, please post in the theme's dedicated forum: http://cyberchimps.com/forum/free/responsive/

  8. varkeychaya
    Member
    Posted 2 years ago #

    A better Answer
    add a class to the link

    <a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>

    remove the image as mentioned before

  9. JeanJensenDK
    Member
    Posted 2 years ago #

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic