
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。

[範例預覽] [範例下載]