How to make transition effect on css sprite hover

Posted by MonsterMMORPG on Stack Overflow See other posts from Stack Overflow or by MonsterMMORPG
Published on 2013-08-02T15:18:17Z Indexed on 2013/08/02 15:36 UTC
Read the original article Hit count: 382

Filed under:
|
|
|
|

Here part of my css sprite code

        #IconSet a {
        width: 36px;
        height: 36px;
        display: inline-block;
    }

    #DeviantArtIcon {
        border-width: 0px;
        border-style: none;
        background-image: url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png);
        background-color: transparent;
        background-repeat: repeat-x;
        background-position: -144px -0px;
        width: 36px;
        height: 36px;
    }

    #DeviantArtIcon:hover {
        border-width: 0px;
        border-style: none;
        background-image: url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png);
        background-color: transparent;
        background-repeat: repeat-x;
        background-position: -144px -36px;
        width: 36px;
        height: 36px;
    }

 <a id="DeviantArtIcon" href="http://monstermmorpg.deviantart.com" rel="nofollow" target="_blank" title="Monster MMORPG On Deviant Art - Please Watch Our Channel"></a>

Now when this icon hovered i want to have transition effect. How can i do that ?

I tried here but no luck

CSS Fade Between Background Images on Hover

© Stack Overflow or respective owner

Related posts about css

Related posts about css3