How to make transition effect on css sprite hover
Solution 1
Fade Image Into Another:
HTML:
<a id="deviant-art-icon" href="http://monstermmorpg.deviantart.com"><span></span></a>
CSS:
#deviant-art-icon {
background:url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png) no-repeat;
display: inline-block;
position: relative;
text-indent: -9999px;
width: 36px;
height: 36px;
background-position: -144px -0px;
}
#deviant-art-icon span {
position: absolute;
top:0;
left:0;
bottom:0;
right:0; background:url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png) no-repeat;
background-position: -144px -36px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#deviant-art-icon:hover span {
opacity: 1;
}
Demo: http://jsfiddle.net/hxJyw/2/
Solution 2
1) You haven't applied any transition effects
in your CSS.
2) No need to add transition effects in :hover
effect.
#DeviantArtIcon {
-o-transition:2s ease-out, background 2s ease-in;
-ms-transition:2s ease-out, background 2s ease-in;
-moz-transition:2s ease-out, background 2s ease-in;
-webkit-transition:2s ease-out, background 2s ease-in;
transition:2s ease-out, background 2s ease-in;
}
Check this in jSFiddle
Hope this is what you're trying.
MonsterMMORPG
Hello. I am the only owner and developer of web based online MMORPG game MonsterMMORPG. I am a computer engineer from Turkey and i am currently doing MA at computer engineering. I am specialized with C# & ASP.net. http://www.monstermmorpg.com/ MonsterMMORPG is a Free To Play Browser Based Online Monster MMORPG Game Better Than Online Pokemon Games You will love it's awesome Monsters We have many different unique features. So i suggest you to check them out. Our game is similiar with Pokemon games but it is unique. Like diablo and torch light. You should visit following sites related to us MonsterMMORPG Facebook Pokemon Games Lovers Facebook Application MonsterMMORPG Youtube Channel Monster Game Forum Canavar Oyunu Forum Pokemon Fakemon DeviantArt MonsterMMORPG Google Plus MonsterMMORPG Twitter MonsterMMORPG Review On Browsergamez MonsterMMORPG Review On mmohuts MonsterMMORPG Developer Blog At MMORPG.com MonsterMMORPG Review On onrpg MonsterMMORPG On GameSpot MonsterMMORPG Wiki MonsterMMORPG On 1UP MonsterMMORPG Digg MonsterMMORPG Official Google Plus Page
Updated on June 06, 2022Comments
-
MonsterMMORPG almost 2 years
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
-
Jeff over 9 years@MonsterMMORPG, how many times is the background loaded when you do it this way?