Demo 1 - One image to another, on hover (transitions)

Plan

1. Put one image on top of the other
2. Change the opacity of the top image on hover

Demo

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 class="bottom" src="/tests/images/Stones.jpg" />
	<img class="top" src="/tests/images/Summit.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;
}			

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

Contents

1. How to use transitions
2. How to use transforms
3. How to use animations
4. Cross fading images
1. On hover
2. On button press
3. With timer
4. More than just fades
5. Animating the background-image property
5. Sliding content
1. Sliding by transitions
2. Sliding by transitions + translations
6. 3D Flipping content
7. Animated Accordions
8. Notes on browser support
9. How will it look in legacy browsers?
10. Further Reading