Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Elijah Collins
Elijah Collins
19,457 Points

Rollover with png icons CSS

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

facebook.png ---> http://oi58.tinypic.com/2j0yqfn.jpg

facebook_blue.png ---> http://oi62.tinypic.com/2guywih.jpg

4 Answers

Steven Deutsch
Steven Deutsch
21,046 Points
Steven Deutsch
Steven Deutsch
21,046 Points

Hey there Elijah,

This is my fix for what you're trying to do. Hope it helps!

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

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

With pseudo-classes you can use the "content" property to add icons/images.

Good luck!

Elijah Collins
Elijah Collins
19,457 Points

unfortunately both didn't really work out to well once I hovered over the icon the link was broken? but still a lot closer than I was earlier

Steven Deutsch
Steven Deutsch
21,046 Points
Steven Deutsch
Steven Deutsch
21,046 Points

Hey Elijah,

I believe the reason for that is because the original image with the anchor to facebook.com is covered with your new, blue facebook image.

Edit: or I guess I'm completely wrong because it worked T~T!

No problem man. Happy to help! Have a good night :)

0ndre
0ndre
2,056 Points
0ndre
0ndre
2,056 Points

Hi, it looks like you are trying to change an inline image with a background image on hover. You could try removing the inline image (facebook.png) inside the anchor link and just set it as a background image. It could look something like this:

HTML:

<a href="LINK" class="social-icon facebook-icon">Follow me on Facebook</a>

and the CSS:

.facebook-icon {
    display: block;
    width: WIDTH OF ICON;
    height: HEIGHT OF ICON;
    background: url('social-icons/facebook.png') 0 0 no-repeat;
    text-indent: -9999px; /*This is to hide the anchor link text*/
}

.facebook-icon:hover {
    background-image: url('social-icons/facebook_blue.png');
}
Elijah Collins
Elijah Collins
19,457 Points
Elijah Collins
Elijah Collins
19,457 Points

Actually it worked!!! Steven Deutsch thanks a lot

Elijah Collins
Elijah Collins
19,457 Points

For future students

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>

and the CSS

#fb {
      background-image: url('../social-icons/facebook.png');
      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%;
}
Elijah Collins
Elijah Collins
19,457 Points
Elijah Collins
Elijah Collins
19,457 Points

Steven Deutsch so basically once I left the css folder and dove into the social-icons folder it started to work. Just have to share the knowledge