duplicate social icon on easy way with reverse color

Question

Im making a responsive website and the top i have navigation social icons and i want to hover each icons into another color. During editing in photoshop i dont know what technique to put a color an easy way. The problem is the icon is small so when it comes putting the color it takes time.I have 5 icons on my website there are : google , facebook, twitter , pinterest and rss .

see image

If I remember correctly, reversing (inverting) color in Photoshop is `CTRL + T`, or you could use [this](http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css) to color your images with CSS. — JCOC611, Nov 13 '14 at 01:49

score 0 · Answer 1 · answered Nov 13 '14 at 02:34

0

You need to change your icon using the css :hover selector.

Try something like this:

HTML

<a class="icon" href="#"></a>

CSS

a{
  background-image: 'image.png'
  width: 32px;
}

a:hover {
 background-image: 'hover-image.png'
}

answered Nov 13 '14 at 02:34

ianaya89

4,153
3
26
34

score 0 · Answer 2 · answered Nov 13 '14 at 14:43

.pinterest-hover{
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/pinterest-hover.png');
}
.facebook-hover{
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/facebook-hover.png');
}
.twitter-hover {
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/twitter-hover.png');
}
.google-hover{
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/google-hover.png');
}

.social-slide {
 /*background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/google-hover.png');*/
 height: 48px;
 width: 48px;
 margin: 10px;
 float: left;
    border-radius:50%;
 -webkit-transition: all ease 0.3s;
 -moz-transition: all ease 0.3s;
 -o-transition: all ease 0.3s;
 -ms-transition: all ease 0.3s;
 transition: all ease 0.3s;
}
.social-slide:hover {
 background-position: 0px -48px;
}

<h2>Slide rollover animation</h2>
<div class="twitter-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
<div class="google-hover social-slide"></div>
<div class="pinterest-hover social-slide"></div>

score 0 · Answer 3 · answered Nov 13 '14 at 15:18

Another way is to use only 1 special image and control colors with css:

.facebook{
 width: 48px;
 height: 48px;
 border-radius: 24px;
 background: #787878 url('http://oi59.tinypic.com/ja9b39.jpg') no-repeat;
}
.facebook:hover{
 background-color:#DB4A39;
}

<div class="facebook"></div>

score 0 · Answer 4 · answered Mar 22 '15 at 10:26

If u just want to change to back color of the icon only using the photo shop tools within a few seconds means u can just use the magic select tool to select the letter in white color and u can just use the image transform selection and change back color easily.

The other method is using the layers, if you want to change the different colors for the image separate the white letter and the background as two layers and change different the colors for background and just drag and drop the letter on the background

duplicate social icon on easy way with reverse color

4 Answers4