1

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

brobken
  • 358
  • 1
  • 12
EliCollins
  • 79
  • 1
  • 8

4 Answers4

2

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.

Gadgetster
  • 473
  • 3
  • 12
  • 33
1

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

Alexandros Spyropoulos
  • 974
  • 1
  • 8
  • 23
  • @Gadgetster if I may ask another question why when I use a background img tag do I need a url? I really wanted to rollover facebook with facebook_blue internally. Use your code was helpful but not was I was aiming for with this set up – EliCollins Apr 04 '14 at 01:30
  • Hi. Do you mean you like to change the background color? just to clarify, the background-image is not a tag, is a CSS rule you can put an image as background to almost any html . If you want to rollover the bg-color the replace the :hover rule with this. .social-btn.facebook .social-icon:hover { background-color: #000099; } – Alexandros Spyropoulos Apr 04 '14 at 01:43
  • btw to change the image src="" attribute you need to do this http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css or Javascript – Alexandros Spyropoulos Apr 04 '14 at 01:48
0

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

EliCollins
  • 79
  • 1
  • 8
  • First of all you will see that targeting by id. Something you must avoid in CSS if possible. Second, you set the image twice, both in CSS and the img tag. why you need so badly to target that element specifically? Then, you set id twice, which means that if you ever try set for example a JS listener by id to the element you'll run into trouble. Third, you are using src, then background img, then you change on :hover the src again. You are kind of lucky if it works and you'll run in trouble maintain it. downvote candidate :). http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/ – Alexandros Spyropoulos Apr 05 '14 at 07:21
  • also try on fiddle your code and see how it works isolated, you probably have more CSS code that somehow makes this code working. in fiddle is buggy. Have fun :) – Alexandros Spyropoulos Apr 05 '14 at 07:25
  • Please use the edit link on your question to add additional information. The Post Answer button should be used only for complete answers to the question. – davidkonrad Apr 05 '14 at 07:47
  • @davidkonrad the code I posted was what I was looking and it works. There is a little funky jittery but the only thing is I have to add a transition timing property in css when I hover over. Thanks guys – EliCollins Apr 05 '14 at 15:56
  • I don't know how to say it, but believe me this code is not exactly what you were asking for. You'll understand by experience. For me for example, when I isolated this piece of code and it didn't work. It has to work for anyone anywhere, when isolated. Anyway, in the end of the day it's your code and I will not tell you how to code, but please, don't present such a "personal" code as a solution to a problem because it's not. I know that you tried to help and I don't mean to show off against you. Have Fun. – Alexandros Spyropoulos Apr 05 '14 at 21:13
  • @AlexandrosSpyropoulos yea Ik my coding skills suck I've only been coding for a about a month and a half, since no one could find the solution to my problem, the solution I presented worked for me. Basically I have two png's, one grey and the other in color in my footer. When I hover over the grey png icon I want it to change/transition from the grey png to the color png without any problems. It'll be cool if you could help thanks – EliCollins Apr 09 '14 at 01:42
  • Everyone has to start from somewhere. What you asking is another question though, and it's kind of advanced technique. You need to use css3 filters and animation and you need only the blue gif. Actually you need to animate the filter value. This is also subject to browser incompatibility http://caniuse.com/css-filters – Alexandros Spyropoulos Apr 09 '14 at 20:35
  • This is the question you are looking for I think. http://stackoverflow.com/questions/10565587/css-transition-opacity-on-mouse-out – Alexandros Spyropoulos Apr 09 '14 at 20:40
0

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

Alexandros Spyropoulos
  • 974
  • 1
  • 8
  • 23