For Live Demo: Click here

HTML Code:

	

		
Cross Fading images using CSS3 Transition
	

	

		
		
	
	
	

		
Click me to toggle
	

JQuery Code:

$(document).ready(function() {
	$("#trans_btn").click(function() {
		$("#trans img.top").toggleClass("transparent");
	});
});

CSS Code:

body{
	margin: 0px auto;
	padding: 0px;
	font-family: verdana;
}

h1{
	font-size: 15px;
}

#container{
	width: 600px;
	text-align: center;
}

#trans, div {
	position:relative;
	height:300px;
	width: 480px;
	margin:0 auto;
}

#trans img {
	position:absolute;
	left:0;
	height: 300px;
	-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;
	
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

#trans img.transparent, img.top:hover  {
	opacity:0;
}		

#trans_btn{
	cursor:pointer;
}

For Live Demo: Click here