Changing Color of Icons with Mouseover

  • landonfaulkner_

    (@landonfaulkner_)


    9 years, 9 months ago

    At the footer of my site (tamifaulknerdesign.com)I have a handful of social media icons that are linked to my respective social accounts. These icons are yellow, however I would like them to turn to gray (I already have the same icons in gray)on a mouseover.

    What is the best way to make this happen and what kind of code (html, css, or both) needs to be written?

    Thanks!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Ismail

    (@elhardoum)

    9 years, 9 months ago

    hello.
    you may just want to use opacity ( cause if you want gray color you need to color your icons image first ) .
    your icons are already yellow. you may want to use these icons i am using . download this picture first : social.png
    please, upload it under that name (social) the link of your image will be : http://tamifaulknerdesign.com/wp-content/uploads/2014/07/social.png . good.
    next, add this code to your footer and delete the old code (after a backup of course!) 

    <style type="text/css">
.social-profiles {
  background:url(/wp-content/uploads/2014/07/social.png) center no-repeat;
  height:31px;
  width:31px;
  float:right;
  opacity:0.6;
  }
.social-profiles:hover {
  background:url(/wp-content/uploads/2014/07/social-hover.gif) center no-repeat;
  height:31px;
  width:31px;
  float:right;
  opacity:0.8;
  }
.facebook-ico {
  background-position:-249px 0;
}
.twitter-ico {
  background-position:-280px 0;
}
.instagram-ico {
    background-position:-404px 0;
}
.linkedin-ico {
    background-position:-93px 0;
}
.email-ico {
    background-position:-342px 0;
}
.facebook-ico:hover {
  background-position:-249px 0;
}
.twitter-ico:hover {
  background-position:-280px 0;
}
.instagram-ico:hover {
    background-position:-404px 0;
}
.linkedin-ico {
    background-position:-93px 0;
}
.ggl-ico:hover:hover {
  background-position:-62px 0;
}
.email-ico:hover {
    background-position:-342px 0;
}
</style>
<div>
<a href="mailto:tamifaulknerdesign@gmail.com" title="email">
  <div class="social-profiles email-ico"></div>
</a>
  <a href="https://www.linkedin.com/pub/tami-faulkner/70/a32/446" title="linkedin">
  <div class="social-profiles linkedin-ico"></div>
</a><a href="https://www.facebook.com/TamiFaulknerDesign" title="facebook">
  <div class="social-profiles facebook-ico"></div>
</a>
  <a href="http://instagram.com/tamifaulknerdesign" title="instagram">
  <div class="social-profiles instagram-ico"></div>
</a>
<a href="https://twitter.com/tamifdesign" title="twitter">
  <div class="social-profiles twitter-ico"></div>
</a>
</div>

    i wrote the above code especially for you.
    now please tell me it worked and you liked it. if not, reply and i will be glad to help you again!

    Ismail

    (@elhardoum)

    9 years, 9 months ago

    hello. i had to update the code.
    you may just want to use opacity ( cause if you want gray color you need to color your icons image first ) .
    your icons are already yellow. you may want to use these icons i am using . download this picture first : http://elegance-style.com/wp-content/uploads/2014/07/social.png
    please, upload it under that name (social) the link of your image will be : http://tamifaulknerdesign.com/wp-content/uploads/2014/07/social.png . good.
    next, add this code to your footer and delete the old code (after a backup of course!)

    <style type="text/css">
.social-profiles {
  background:url(/wp-content/uploads/2014/07/social.png) center no-repeat;
  height:31px;
  width:31px;
  float:right;
  opacity:0.6;
  }
.social-profiles:hover {
  background:url(/wp-content/uploads/2014/07/social.png) center no-repeat;
  height:31px;
  width:31px;
  float:right;
  opacity:0.8;
  }
.facebook-ico {
  background-position:-249px 0;
}
.twitter-ico {
  background-position:-280px 0;
}
.instagram-ico {
    background-position:-404px 0;
}
.linkedin-ico {
    background-position:-93px 0;
}
.email-ico {
    background-position:-342px 0;
}
.facebook-ico:hover {
  background-position:-249px 0;
}
.twitter-ico:hover {
  background-position:-280px 0;
}
.instagram-ico:hover {
    background-position:-404px 0;
}
.linkedin-ico:hover {
    background-position:-93px 0;
}
.email-ico:hover {
    background-position:-342px 0;
}
</style>
<div>
<a href="mailto:tamifaulknerdesign@gmail.com" title="email">
  <div class="social-profiles email-ico"></div>
</a>
  <a href="https://www.linkedin.com/pub/tami-faulkner/70/a32/446" title="linkedin">
  <div class="social-profiles linkedin-ico"></div>
</a><a href="https://www.facebook.com/TamiFaulknerDesign" title="facebook">
  <div class="social-profiles facebook-ico"></div>
</a>
  <a href="http://instagram.com/tamifaulknerdesign" title="instagram">
  <div class="social-profiles instagram-ico"></div>
</a>
<a href="https://twitter.com/tamifdesign" title="twitter">
  <div class="social-profiles twitter-ico"></div>
</a>
</div>

    i wrote the above code especially for you.
    now please tell me it worked and you liked it. if not, reply and i will be glad to help you again!

    Thread Starter landonfaulkner_

    (@landonfaulkner_)

    9 years, 8 months ago

    Sorry for the delayed response Samuel. This looks great, but I wrote the code for the icons using HTML with the text widget. The code I used is as follows.

    [ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]

    <div align="right"><a href="https://twitter.com/tamifdesign"><img title="Twitter" src="http://tamifaulknerdesign.com/wp-content/uploads/2014/07/twitter.png" alt="Twitter" width="48" height="48" /></a>   <a href="http://instagram.com/tamifaulknerdesign"><img title="Instagram" src="http://tamifaulknerdesign.com/wp-content/uploads/2014/07/instagram.png" alt="Instagram" width="48" height="48" /></a>   <a href="https://www.facebook.com/TamiFaulknerDesign"><img title="Facebook" src="http://tamifaulknerdesign.com/wp-content/uploads/2014/07/facebook.png" alt="Facebook" width="48" height="48" /></a>   <a href="https://www.linkedin.com/pub/tami-faulkner/70/a32/446"><img title="LinkedIn" src="http://tamifaulknerdesign.com/wp-content/uploads/2014/07/linkedin.png" alt="LinkedIn" width="48" height="48" /></a>   <a href="mailto:tamifaulknerdesign@gmail.com"><img title="Email" src="http://tamifaulknerdesign.com/wp-content/uploads/2014/07/mail.png" alt="Email" width="48" height="48" /></a></div>
    Ismail

    (@elhardoum)

    9 years, 8 months ago

    ok i see now what you gonna do is download and upload http://elegance-style.com/wp-content/uploads/2014/07/social.png , then replace your entire code with mine, from div to /div, and don’t worry about aligning it is floating to the right :

    <style type="text/css">
.social-profiles {
  background:url(/wp-content/uploads/2014/07/social.png) center no-repeat;
  height:31px;
  width:31px;
  float:right;
  opacity:0.6;
  }
.social-profiles:hover {
  background:url(/wp-content/uploads/2014/07/social.png) center no-repeat;
  height:31px;
  width:31px;
  float:right;
  opacity:0.8;
  }
.facebook-ico {
  background-position:-249px 0;
}
.twitter-ico {
  background-position:-280px 0;
}
.instagram-ico {
    background-position:-404px 0;
}
.linkedin-ico {
    background-position:-93px 0;
}
.email-ico {
    background-position:-342px 0;
}
.facebook-ico:hover {
  background-position:-249px 0;
}
.twitter-ico:hover {
  background-position:-280px 0;
}
.instagram-ico:hover {
    background-position:-404px 0;
}
.linkedin-ico:hover {
    background-position:-93px 0;
}
.email-ico:hover {
    background-position:-342px 0;
}
</style>
<div>
<a href="mailto:tamifaulknerdesign@gmail.com" title="email">
  <div class="social-profiles email-ico"></div>
</a>
  <a href="https://www.linkedin.com/pub/tami-faulkner/70/a32/446" title="linkedin">
  <div class="social-profiles linkedin-ico"></div>
</a><a href="https://www.facebook.com/TamiFaulknerDesign" title="facebook">
  <div class="social-profiles facebook-ico"></div>
</a>
  <a href="http://instagram.com/tamifaulknerdesign" title="instagram">
  <div class="social-profiles instagram-ico"></div>
</a>
<a href="https://twitter.com/tamifdesign" title="twitter">
  <div class="social-profiles twitter-ico"></div>
</a>
</div>

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing Color of Icons with Mouseover’ is closed to new replies.