Links (Animated when hover)?

D

dezignx

New Member
Like on this site here

When you hover over the links, it displays like a firecracker animation.

How do you do that (mod or anything) or what is it called so I can try and find it?

Thanks in advance
 
Go to:
AdminCP>>Styles & Templates>>Style Manager:

Select "Edit Templates" from the drop-down menu of the style you want it on

open "footer"

go to the top of the code, hit enter a few times to give you some space, and enter the following code:

Code: 
<STYLE type="text/css">A:hover{background:url(http://i293.photobucket.com/albums/mm71/smallvilleproject/sparkles.gif);}hr{background-image:url(http://i293.photobucket.com/albums/mm71/smallvilleproject/sparkles.gif);} a:hover img{background-image:url(http://i293.photobucket.com/albums/mm71/smallvilleproject/sparkles.gif); filter:alpha(finishopacity=0, style=2); border:1px solid; } </STYLE><br />
Then click "Save" and your done! :-P

Go to your forum home, and look at this awesome MOD :-P
 
Grinderhand said:
Go to:
AdminCP>>Styles & Templates>>Style Manager:

Select "Edit Templates" from the drop-down menu of the style you want it on

open "footer"

go to the top of the code, hit enter a few times to give you some space, and enter the following code:

Code: 
<STYLE type="text/css">A:hover{background:url(http://i293.photobucket.com/albums/mm71/smallvilleproject/sparkles.gif);}hr{background-image:url(http://i293.photobucket.com/albums/mm71/smallvilleproject/sparkles.gif);} a:hover img{background-image:url(http://i293.photobucket.com/albums/mm71/smallvilleproject/sparkles.gif); filter:alpha(finishopacity=0, style=2); border:1px solid; } </STYLE><br />
Then click "Save" and your done! :-P

Go to your forum home, and look at this awesome MOD :-P
Click to expand...

Thanks, but it causes problems on my site.. when you hover images such as the logo/ avatars etc, on rollover they are outlined with a colour, thus making them bigger and looking horrid.

Also.. the sparkles image is hosted on photobucket.. maybe you should have uploaded it here as if it's deleted from that photobucket account- this mod will stop working for anyone who's used your code. Also- if the bandwidth is reached on that photobucket account it will also stop working.

So here.. I've uploaded it so people can host it themselves :)

View attachment 15364
 
Thanks Grinderhand, it works well. I just did like h@ck3r said and hosted it myself....

Works well!!!!!

Thanks
 
To stop this from working on IMAGES on your site, use this code instead of the one Gingerhand gave:

Code: 
<STYLE type="text/css">A:hover{background:url(http://i293.photobucket.com/albums/mm71/smallvilleproject/sparkles.gif);}hr{background-image:url(http://i293.photobucket.com/albums/mm71/smallvilleproject/sparkles.gif); filter:alpha(finishopacity=0, style=2); border:1px solid; } </STYLE><br />

But I'd recommend downloading the image, and hosting it yourself.

Look in the above code and you'll see 2 URL's... replace them with the new link to whever you host the image on your server :)
 
You must log in or register to reply here.
Back
Top