Css3の画像アニメーションと出現するテキスト

Question

私は、画像にフェードをかけるために、CSS3だけでテキストを表示しています。 http://css3.bradshawenterprises.com/cfimg1/ 今私がしようとしているのは、画像をホバーすると、他の画像がフェードインされるだけでなく、クリック可能なリンクが含まれているテキストもあるということです。ダウンロードリンク）。

.crossfade h1 { 
position: absolute; 
} 

段落がまったく表示されませんので、私は、H1を使用します。最初の問題は、テキストが、私はこれを追加することで解決することができDIV、外に現れたということでした。この後、私は右に退色し、テキストもそれの場所にありますが、それは選択可能ではなく、クリック可能ではなく、画像の一部であるように見えます。ここで

は私のコードは、（あまりにも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; 
} 

すべてのヘルプやアイデアをいただければ幸いです。 ありがとうございます。

Answer 1

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

私は別のものを追加：置いて、Zインデックス。

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

は、編集：ここで何をしたいの作業exempleだ（コメントを参照）

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

用心、私はCSSを整え。