Image Rollover Effects

Use one of these codes to create cool effects when people put their mouse pointer over images on your MySpace, so called hover or rollover effects. Note that these effects only work in Internet Explorer but the majority of MySpacers use that. People using other browsers will see no effect. Place the code in "About Me". We have got Text Link Hover Effects too.

	X Ray Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;} a:hover, a.redlink:hover, a.navbar:hover {Filter: Xray) font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {Filter: Xray); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	See Through Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;} a:hover, a.redlink:hover, a.navbar:hover {Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Wavy Effects <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;} a:hover, a.redlink:hover, a.navbar:hover {Filter: Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10) font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {Filter: Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Pink Rollover Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/pink.jpg);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/pink.jpg); font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/pink.jpg); filter:alpha(finishopacity=50, style=2); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Invert Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;} a:hover, a.redlink:hover, a.navbar:hover {Filter: Invert) font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {Filter: Invert); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Mirror Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;} a:hover, a.redlink:hover, a.navbar:hover {Filter: FlipH) font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {Filter: FlipH); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Sparkles Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/sparkles.gif);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/sparkles.gif); font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/sparkles.gif); filter:alpha(finishopacity=0, style=2); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Flip Upside Down Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;} a:hover, a.redlink:hover, a.navbar:hover {Filter: FlipV) font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {Filter: FlipV); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Grayscale Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;} a:hover, a.redlink:hover, a.navbar:hover {Filter: Gray) font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {Filter: Gray); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Purple Stars Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/purplestars.gif);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/purplestars.gif); font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/purplestars.gif); filter:alpha(finishopacity=50, style=2); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Blur / Fuzzy Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;} a:hover, a.redlink:hover, a.navbar:hover {Filter: Blur(Add = 0, Direction = 225, Strength = 10) font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {filter: Blur(Add = 0, Direction = 225, Strength = 10); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Blue Rollover Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/blue.jpg);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/blue.jpg); font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/blue.jpg); filter:alpha(finishopacity=50, style=2); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Hearts Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/hearts.gif);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/hearts.gif); font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/hearts.gif); filter:alpha(finishopacity=50, style=2); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>
	Pink Waves Effect <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/pinkwave.gif);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/pinkwave.gif); font-size:8pt; color:red; text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.zoodu.com/myspace-codes-image-rollover-effects/images/pinkwave.gif); filter:alpha(finishopacity=50, style=2); border:0px solid;} </style> <a href="http://www.zoodu.com" target="_blank"><img src="http://www.zoodu.com/img/button.gif" alt="http://www.zoodu.com/" style="position:absolute; left:0px; top: 0px;" border="0"></a>