CODEWITHSUNDEEP
htmlcssimagesprite
Kareen Lagasca
Kareen Lagasca

Reputation: 939

Image Sprites correct spacings

I am trying to achieve a simple rollover using image sprite. Unfortunately i am having trouble in setting the image in the center.

the a class should be a 26px width and 21px in height. but facebook holder should have 10px padding. It would be great if someone can look at my codes?

HTML

<div class="holder">

    <div class="facebook-holder">
    <a class="ss facebook" href="https://www.facebook.com/bendaggersdotcom" target="_blank"></a>
    </div>

</div>

CSS

.holder{background:#a8a1a2; height: 50px; width:150px; padding:10px;}

.ss {display:block;height:21px;width:26px;background: url(http://www.bendaggers.com/wp-content/uploads/2013/08/socials.png);margin-left:24px;float:left;
}

.facebook-holder { background:#FFF; max-width:46px; max-height:41px; height:100%;vertical-align:baseline; text-align:center;}
.facebook-holder:hover {background:#3b5998;}
.facebook {width:26px;background-position: 0px center; background-repeat: no-repeat; margin:0px; padding:10px;}
.facebook:hover {background-position:-26px; padding:10px;}

See it in action: http://jsfiddle.net/bendaggers/qQFVV/

What im trying to replicate: http://readwrite.com/2013/08/29/it-has-been-a-bad-summer-for-apples-ios-7#_tid=popular-feed&_tact=click+%3A+A&_tval=2&_tlbl=Position%3A+2 (notice the share buttons at the right side of your screens? yeah, that's right!)

By the way, feel free to modify everything if that would make it easier for you.

Thank you very much!

Upvotes: 1

Views: 56

Answers (1)

Mr Lister
Mr Lister

Reputation: 46589

You are trying to change too many properties on hover.

The properties for the not-hovered state need to be

  display:block;
  height:21px; width:26px;
  border:10px solid #FFF;
  background: #FFF url(http://www.bendaggers.com/wp-content/uploads/2013/08/socials.png) no-repeat;}

and then you only have to change the background colors and the background position for the sprite on hover.

  border-color: #3b5998;
  background-color: #3b5998;

so the specific styles for the facebook icon would be nothing but

.facebook {
  background-position: 0 center; }
.facebook:hover {
  background-position: -26px center;}

See updated fiddle: http://jsfiddle.net/qQFVV/1/

Upvotes: 1

Related Questions