Question

Currently I’m working on a website that has multiple images on separate sprite sheets (like the two in this link (imgur). I’m trying to fade the duller image into the brighter one and I’ve been using something like:

.display {
    background-image: url("../images/1.png");
    display: block;
    background-position: 0 -53px;
    width: 124px;
    height: 53px;
}
.display:hover {
    background-image: url("../images/1.png");
    display: block;
    background-position: 0 0px;
    width: 124px;
    height: 53px;
}

This works, but it just makes the image change instantly, where I would prefer some kind of a “fade in” or “glow” effect on hover. What would be the easiest way to achieve the result I want? I’m thinking it would be either jQuery or something in CSS3, but I haven’t really had any luck.

Answer 1

In CSS 3, you can do this way, setting the opacity and adding the transformation, there by you would need only one image! Check out this:

img {
    opacity: 0.5;
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s; /* Firefox 4 */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s; /* Opera */
}
img:hover {
    opacity: 1;
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s; /* Firefox 4 */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s; /* Opera */
}​

Fiddle: http://jsfiddle.net/sBeed/