出現文字的Css3圖片動畫

我正在試圖製作一張圖片，上面出現一些純CSS3文本的圖片。我從這裏採取了基本的褪色：http://css3.bradshawenterprises.com/cfimg1/ 現在我想要做的是，當我徘徊圖片，然後不僅其他圖片淡入，但一些文本也包含一個可點擊的鏈接（即一個下載鏈接）。第一個問題是，案文出現在div外面，我可以通過添加此修復程序：

出現文字的Css3圖片動畫

.crossfade h1 { 
position: absolute; 
}

我使用H1，因爲段落不會出現在所有。所以在這之後，我得到了淡入淡出的權利，甚至文本也在它的位置，但它不是可選擇的，也不是可點擊的，它看起來就像是圖像的一部分。

這裏是我到目前爲止的代碼（HTML和CSS的部分太）：

<div class="crossfade"> 
    <img class="bottom" src="pics\hover.jpg" /> 
    <h1>Title</h1> 
    <img class="top" src="pics\23.jpg" /> 
</div> 

.crossfade { 
    position:relative; 
    height:200px; 
    width:200px; 
    margin:0 auto; 
} 
.crossfade img { 
    position:absolute; 
    left: 0; 
    -webkit-transition: opacity 0.2s ease-in-out; 
    -moz-transition: opacity 0.2s ease-in-out; 
    -o-transition: opacity 0.2s ease-in-out; 
    -ms-transition: opacity 0.2s ease-in-out; 
    transition: opacity 0.2s ease-in-out; 
} 

.crossfade img.top:hover { 
    opacity: 0; 
} 

.crossfade h1 { 
    position: absolute; 
}

上的任何幫助或想法，將不勝感激。在此先感謝。

來源

2012-04-07 Laszlo Parazs

添加Z-index也許？ – mddw 2012-04-07 14:53:56

就我所做的實驗而言，z-index不是一個合適的解決方案。如果將鼠標指針移到文本上，則圖片會消失。 – 2012-04-07 15:00:46

看到我的答案，可以用一點CSS來解決:) – mddw 2012-04-07 15:12:02

http://jsfiddle.net/3tkWj/5/

我只是增加了一個：hover和的z-index。

.crossfade img.top:hover, .crossfade p:hover+img { 
    opacity: 0; 
}

編輯：這裏有你想要的（見註釋）

http://jsfiddle.net/3tkWj/12/

當心什麼工作爲例，我trimed的CSS。

來源

2012-04-07 15:11:34 mddw

謝謝，我做錯了。它對我來說越來越清晰，但是我仍然不知道如何讓文本只在我們將鼠標懸停在圖像上時才顯示。 – 2012-04-07 15:22:17

我將編輯我的答案以向您展示。 – mddw 2012-04-07 15:23:14

非常感謝您的幫助！ – 2012-04-07 15:30:07

出現文字的Css3圖片動畫

回答

相關問題