CSS教學－hover滑入圖片時，加入CSS3動畫特效「淡入淡出」變換圖片

.hover {position:relative;}

.hover img {
  position:absolute;
  /* CSS3淡出淡入效果,1秒 */
  -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;
}

.hover img:nth-of-type(2):hover{
  opacity:0; /*滑鼠滑入時，透明度變0*/
}

<div class="hover">
  <img src="images/01.jpg" />
  <img src="images/02.jpg" />
</div>