CODEWITHSUNDEEP
csscss-spritessprite
Denis Yakovenko
Denis Yakovenko

Reputation: 127

CSS Sprites don't work

I need to embed social network sprite on my html page, but for some reason they don't display (whereas the links themselves work). Here is my html:

<div class="sprites">
    <a class="instagram" href="http://instagram.com"></a>
    <a class="twitter" href="https://twitter.com"></a>
    <a class="facebook" href="https://fb.com"></a>
    <a class="vk" href="https://vk.com"></a>
    <a class="pinterest" href="https://pinterest.com"></a>
    <a class="youtube" href="https://youtube.com"></a>
</div>

and fiddle with scss: http://jsfiddle.net/zvj89o0o/ And below is what my sprite looks like:

enter image description here

Upvotes: 0

Views: 527

Answers (2)

Preben
Preben

Reputation: 1287

It works well, but you have forgot (in the fiddle) to have a background URL that is valid.

I tried with the image you have above in this post, and it works well (will need some adjustments):

http://jsfiddle.net/gau66y74/

enter image description here

I refer to this CSS:

.youtube, .pinterest, .vk, .facebook, .twitter, .instagram {
    width: 125px;
    height: 125px;
    background: url(https://i.sstatic.net/jI86i.png) 0 0 no-repeat;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

To fix the HOVER issue, use :

.youtube:hover {
        background-position: -256px -384px;
}

in stead of:

.youtube {
    background-position: -256px -256px;
    &:hover {
        background-position: -256px -384px;
    }
}

Here is a fiddle showing that (only for YouTube icon)

Upvotes: 1

codeispoetry
codeispoetry

Reputation: 93

Try this: 

.youtube, .pinterest, .vk, .facebook, .twitter, .instagram {
    width: 105px;
    height: 105px;
    background: url("path/to/jI86i.png") 0 0 no-repeat;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

Upvotes: 2

Related Questions