CODEWITHSUNDEEP
css
Joe Bobby
Joe Bobby

Reputation: 2811

CSS3 Fade In Instead of Sliding?

Heres my CSS:

#display {
    background: url('/src/images/icons/display.png') no-repeat 0 0;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#display:hover{
    background: url('/src/images/icons/display.png') no-repeat 0 -49px;
}

with #display as the ID of an anchor when I hover over it instead of fading into the sprite 49 pixels below it slides to it.. anyway to get it to fade?

Upvotes: 3

Views: 4191

Answers (2)

Andrew Odri
Andrew Odri

Reputation: 9432

The pure CSS way of doing this would be as follows:

#display {
    background: url('/src/images/icons/display.png') no-repeat 0 0;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
}

#display:after {
    content: "";
    display: block;
    background: url('/src/images/icons/display.png') no-repeat 0 -49px;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
        opacity: 0;
-webkit-transition-property: opacity;
   -moz-transition-property: opacity;
     -o-transition-property: opacity;
    -ms-transition-property: opacity;
        transition-property: opacity;
-webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
     -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
        transition-duration: 0.3s;
}

#display:after:hover {
    opacity: 1;
}

What this code does is use the CSS3 :after pseudo element to basically create a brand new image on top, and then fade that from transparent to opaque when it is hovered over.

The only problem is that Firefox is currently the only browser that supports fading :before and :after pseudo elements.

If you have a child element inside (like a div or a element), you could do this instead:

#display {
    background: url('/src/images/icons/display.png') no-repeat 0 0;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
}

#display a {
    display: block;
    background: url('/src/images/icons/display.png') no-repeat 0 -49px;
    height: 49px;
    width: 49px;
    float: left;
        opacity: 0;
-webkit-transition-property: opacity;
   -moz-transition-property: opacity;
     -o-transition-property: opacity;
    -ms-transition-property: opacity;
        transition-property: opacity;
-webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
     -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
        transition-duration: 0.3s;
}

#display:hover a {
    opacity: 1;
}

Hope that helps :)

Upvotes: 4

David Thomas
David Thomas

Reputation: 253318

I'm not entirely sure what you're asking for, but it reads like you're asking for help with fading a colour change? If that's so:

#test {
    background-color: #fff;
    -webkit-transition: background-color 2s linear;
    -moz-transition: background-color 2s linear;
    -o-transition: background-color 2s linear;
    -kthml-transition: background-color 2s linear;
    transition:  background-color 2s linear;
}
#test:hover {
    background-color: #f90;
    -webkit-transition: background-color 2s linear;
    -moz-transition: background-color 2s linear;
    -o-transition: background-color 2s linear;
    -kthml-transition: background-color 2s linear;
    transition:  background-color 2s linear;
    -webkit-transition: background-color 2s linear;
}

JS Fiddle demo.

On the other hand, if you want it to fade the element in:

#test {
    background-color: #fff;
    opacity: 0;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    -kthml-transition: opacity 2s linear;
    transition:  opacity 2s linear;
    -webkit-transition: opacity 2s linear;
}
#test:hover {
    background-color: #f90;
    opacity: 1;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    -kthml-transition: opacity 2s linear;
    transition:  opacity 2s linear;
    -webkit-transition: opacity 2s linear;
}

JS Fiddle demo.

Upvotes: 0

Related Questions