<div class="pics">
	<img src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" alt="滑入顯示的圖片">
    <img src="http://lorempixel.com/output/food-q-c-640-480-2.jpg" alt="原本顯示的圖片">
</div>
.pics{ position:relative;}
.pics img{ position:absolute;
  /* 淡出淡入效果2秒 */
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
 }
 .pics img:last-child:hover{
	 /* 滑入時第一張透明度設0 */
	  opacity:0;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.