純CSS3的圖片集點擊放大

<div class="slideshow">
	<input type="checkbox" id="image1" /><label for="image1" class="toggle"><img src="../gall/pic_40h.jpg" alt="" /></label>
	<input type="checkbox" id="image2" /><label for="image2" class="toggle"><img src="../gall/pic_33h.jpg" alt="" /></label>
	<input type="checkbox" id="image3" /><label for="image3" class="toggle"><img src="../gall/pic_18h.jpg" alt="" /></label>
</div>

<style>
.slideshow {width:300px; height:60px; margin:250px auto;}
input {position:absolute; left:-9999px; display:none;}
label.toggle {display:block; width:80px; height:60px; margin:10px; position:relative; cursor:pointer; float:left; z-index:10;
	-webkit-transition: 0s 1s;
	-moz-transition: 0s 1s;
	-o-transition: 0s 1s;
	transition: 0s 1s;
}
label.toggle img {display:block; width:80px; height:60px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}
input:checked + label {z-index:100;
	-webkit-transition: 0s;
	-moz-transition: 0s;
	-o-transition: 0s;
	transition: 0s;
}
input:checked + label img {
	-webkit-transform:scale(8);
	-moz-transform:scale(8);
	-o-transform:scale(8);
	transform:scale(8);
}			
</style>