Css – Image substitution and transition with css3

csscss-transitionshoverimage

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.

Best Answer

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

Related Topic