Posts Tagged ‘on hover (transitions)’


Cross fading images
One image to another, on hover (transitions)
Code

First up, the HTML markup. Without CSS enabled, you just get two images. Remember to add alt text for production use.

<div id="cf"> <img src="img1.jpg" /> <img src="img2.jpg" /> </div>

Then the CSS:

#cf { position:relative; height:281px; width:450px; margin:0 auto; } #cf 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; } #cf img.top:hover { opacity:0; }
Advertisements