Image substitution and transition with css3?

Question

I wonder If anybody knows a clever and new way how to make a transition between two background images? I know there are multiple tutorials out there just most of them are outdated and old.

I wonder if there is a clever and modern CSS3 way of doing something like this.

I have a simple logo.png set as background to a div.logo (I want it to be set as a background image not via img src). And when I hover over it I want a smooth transition to "logo-hover.png" which is the same file just in a different color.

Any ideas how to do this nowadays?

My approach would be this: - I create a outer container around div.logo wich position relative. I position two divs inside of it with position absolute on top of each other. The div.hover is set to display:none and if I hover it I use css3 transition to animate it's opacity.

Is this the only way of doing this? I'd actually love to use a pure css way where I don't have to add an additional div with the hover state to the dom itself.

Any ideas on that matter?

Thank you in advance.

Answer 1

use this

#home .stripes, #home .stripes:hover a {
    text-indent: -9999px;
    width: 116px;
    height: 128px;
    margin: 50px 0px 0px 56px;
    float:left;
    padding: 0;
    background:url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}
#home .stripes a {
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
#home .stripes a:hover, #home .stripes a:focus {
    background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
    opacity: 0;
}

and

Answer 2

I actually just came up with a solution for this myself.

I wanted a way to have an image appear to work as if it was a sprite, but keep it super simple.

HTML:

<div class="facebookicon">
    <a href="#!"><img src="http://example.com/some.png"></a>
</div>

CSS:

.facebookicon img {
    background: #fff;
    transition:  background 400ms ease-out;
}

.facebookicon img:hover {
    background: #3CC;
    transition:  background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */

You can see it here:

http://jsfiddle.net/mattmagi/MpxBd/

Answer 3

I think this is what you want: DEMO.

Basically it's using transitions like you said:

CSS markup:

.imagesTest {
    position:relative;
    height:200px;
    width:300px;
}
.imagesTest img {
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.imagesTest img.top:hover {
    opacity:0;
}​

HTML markup:

<div class="imagesTest">
    <img class="bottom" src="some/image" />
    <img class="transition" src="some/image" />
</div>​

For more information, check more examples here