Log in

View Full Version : fading hover



markspencer
04-30-2011, 05:47 AM
For my new project i'm looking for some good solution to fade images in links on hover from b/w to color. i know this is a quiet often used effect, but i still like it. so, which way should i go?

1. the css solution is as far as i know not valid and i would like to keep it clean.

2. flash is one possibility, but not really useful, as i have already 15 link images as this moment and will have more in future...

3. animated gif takes as much time as flash (or even more)

4. i was looking for some javascript solutions as the site will be running jquery, but both solutions i have found were not really good and seemed incomplete.

Do you know some other solution or a working jquery one. I would appreciate your help a lot as this it becoming quiet frustrating.

Sabrina Gage
05-03-2011, 10:30 PM
<div class="dvbutton">
<a href="../samplepage.aspx" class="abutton" target="_blank"></a>
</div>

.abutton
{
background:url("../images/sample.gif") no-repeat 0px 0px;
}
.dvbutton a:hover
{
background:url("../images/samplehover.gif") no-repeat 0px 0px;
}
.abutton, .dvbutton
{
display:block;
height:69px;
width:221px;
}