Rollover with png icons CSS

Question

Nub to coding, but I followed

this link ---> http://stradegyadvertising.com/tutorial-how-to-image-hover-swap-css/

and I'm having trouble hovering over the facebook png icon and having it change to the facebook_blue png. Not sure if I should use the background url tag I'm drawing blanks

HTML

<a href="https://www.facebook.com/ecthephotographer">
<img src="social-icons/facebook.png" alt="Follow me on Facebook" 
class="social-icon" id="fb"></a>

CSS

#fb {
    max-width: 4%;
    max-height: 4%;
    background-image: url(social-icons/facebook_blue.png);
    background-position: 0 0;
}
#fb:hover {
    background-position: 0 100%;
}

You can download both pngs here

http://tinypic.com/4dulp1mt

Answer 1

First of all remove the src from <img> as you have it in the css

<img alt="Follow me on Facebook">

Then in the css

 img {
    height:100px;
    width:100px;
    background-image:url('http://i58.tinypic.com/2j0yqfn.jpg');
    background-size:100px 100px;
    background-repeat:no-repeat;
}

img:hover {
    background-image:url('http://i62.tinypic.com/2guywih.jpg');
}

DEMO

The max-width: 4%; max-height: 4%; are way too small so you won't even see the image unless you have a giant screen. I generally use max-width when I want it to stop getting wider based on screen size.

Answer 2

My thumbs up

I would suggest to change a little bit your code in order to make it reusable. for example you might need to add a twitter button or change the size to all of your social buttons by adding one more class to the first one and overriding the height and width.

In general try to avoid doing everything in one class, split your code as much as you can and combine the chunks.

Have Fun!!! ;)

HTML

<a href="https://www.facebook.com/ecthephotographer" class="social-btn facebook" >
    <img alt="Follow me on Facebook" class="social-icon"/>
</a>

CSS

//code for all your social buttons    
.social-btn .social-icon{
    height:100px;
    width:100px;
    background-size:100px 100px;
    background-repeat:no-repeat;
}

//code for your facebook buttons
.social-btn.facebook .social-icon {   
    background-image:url('http://i58.tinypic.com/2j0yqfn.jpg'); 
}

.social-btn.facebook .social-icon:hover {
    background-image:url('http://i62.tinypic.com/2guywih.jpg');
}

DEMO

Answer 3

So I had additional help but this is more the code I need

html

<a href="https://www.facebook.com/ecthephotographer" id="fb">
<img src="social-icons/facebook.png" alt="Follow me on Facebook" class="social-icon" id="fb"></a>

css

#fb {

      background-position: 0 0;
      max-height: 4%;
      max-width: 4%;
    }

#fb:hover {
  content: url('../social-icons/facebook_blue.png');
  background-position: 0 100%;
 clear: both;
  margin: 0 2%;
}

Hopefully someone may need this in the future

Answer 4

To make the same thing with transition you can do

HTML

<a href="https://www.facebook.com/ecthephotographer" class="social-btn facebook">
   <img alt="Follow me on Facebook" class="social-icon rollover" src="http://i58.tinypic.com/2j0yqfn.jpg"/>
   <img alt="Follow me on Facebook" class="social-icon" src="http://i62.tinypic.com/2guywih.jpg" />
</a>

CSS

.social-btn {
  display: inline-block; 
  position: relative;    
}


.social-btn .social-icon {
  display: inline-block;
  height:100px;
  width:100px;  
  opacity: 1;    
}

.social-btn .social-icon.rollover {
  position: absolute;
}


.social-btn:hover .social-icon.rollover {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;

  opacity: 0;
}

Always keep in mind that the more fancy effects you add in your css the less maintainable your code is and the risk of not supporting something in some browsers increases. + less is more. If you find your self playing a lot with CSS consider to have a loo on {LESS} or Sass Superscript. They are very useful when you work with a lot of CSS.

Also , If you are new to web development, consider in having a look to the bootstrap framework. To see some well defined CSS. It is a good boilerplate.

DEMO