CODEWITHSUNDEEP
htmlcsstransition
aalok89
aalok89

Reputation: 181

How do I use CSS to cross fade between images?

I followed a tutorial exactly and instead of fading from the Print_tab.png to the Print_tab_hover.png, it just fades to white. Any way I could fix this (without using javascript)?.

Here is the code i Used:

HTML:

    <div id="print"
     <img class="bottom" src="images/print_tab_hover.png"  />
     <img class="top" src="images/print_tab.png"  />
    </div>

CSS:

    #print {
    position:relative;
    width: 300px;
    height: 169px;
    margin: 0 auto;
    }

    #print img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out;
    }

    #print img.top:hover {
    opacity: 0;
    }

Upvotes: 1

Views: 5374

Answers (1)

doptrois
doptrois

Reputation: 1570

This works:

#print {
    position:relative;
    width: 200px;
    height: 120px;
    margin: 0 auto;
    background-image: url(http://fc06.deviantart.net/images2/i/2004/07/e/7/Firefox_dock_icon.png);
}

#print img {
    position: absolute;
    left: 0;
    width: 200px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out;
}

#print img.top:hover {
    opacity: 0;
}

<div id="print">
   <img class="top" src="http://lanscaping-ideas.com/wp-content/uploads/2012/04/Landscape-Paintings-2.jpg"  />
</div>

Just set a default background for the #print and fade over the new image, or vise versa.

Upvotes: 1

Related Questions