css3使圖片具有淡入淡出的效果

			<div id="introduce">
				<div id="content">
					<div id="logo1">
						<img class="anim_fade_image" src="jslunbo1/images/logo1.png" />
						<img id="juzhong" src="jslunbo1/images/erweima1.png" />
					</div>
					<div id="logo2">
						<img class="anim_fade_image" src="jslunbo1/images/logo2.png" />
						<img id="juzhong2" src="jslunbo1/images/erweima2.png" />
					</div>
					<div id="logo3">
						<img class="anim_fade_image" src="jslunbo1/images/logo3.png" />
						<img id="juzhong3" src="jslunbo1/images/erweima3.png" />
					</div>
				</div>
			</div>

css樣式如下：

		 	.anim_fade_image{
		 		    position:absolute;
    				-webkit-transition: opacity 3s ease-in-out;
    				-moz-transition: opacity 3s ease-in-out;
    				-o-transition: opacity 3s ease-in-out;
    				transition: opacity 3s ease-in-out;
		 	}
		.anim_fade_image:hover, .anim_fade_image_hover {
    		opacity:0;
    		filter: alpha(opacity=0);
			}
			#juzhong{
				width: 216px;
				height: 308px;
				margin: 59.5px 41.5px;
			}
			#juzhong2{
				width: 216px;
				height: 308px;
				margin: 59.5px 41.5px;
			}
			#juzhong3{
				width: 216px;
				height: 308px;
				margin: 59.5px 52.5px;
			}

效果圖如下：

鼠標放在圖上：

鼠標一走恢復：