Dreamweaver在很早之前，內建就可製作出，二張圖片互換的效果，當滑鼠滑到圖片上方時，就可切換成另一張圖片，但用過的朋友應該都知道，當使用圖片切換的效果時，除了會產生出一堆的javascript碼以外，當今天中途再刪減時，就常會出問題，而這個效果，其實必需要使用到javascript，只需透過CSS就可實現出，兩個img相互變換的效果，同時還可加入CSS3的動畫效果，讓圖片在變換時，產生出淡入淡出的效果。
Step1
#css
.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/
}
Step2
由於剛將img設為圖層，因此這時02.jpg會蓋在01.jpg上方，當滑鼠滑入02.jpg將它的透明度設為0後，就會看到01.jpg，是不是既簡單又方便呀!
#html
<div class="hover">
<img src="images/01.jpg" />
<img src="images/02.jpg" />
</div>
Step3
這時看到的圖片是02.jpg。
Step4
當滑鼠滑入時，就變成顯示01.jpg。
[範例預覽] [範例下載]