Windows 7 Ultimate SP1 Key Windows 7 Professional SP1 Key Office Professional Plus 2016 Key canada goose outlet www.troilus.es parajumpers belgie parajumpers sale

Cross Fading images using CSS3 Transition

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


» Need to Post HTML Code? Use Postable to post code friendly html. *Wrap all html code in <pre></pre> tags.