CSSホバーでフェードイン

Question

CSSを使用してテキストを表示すると、画像がフェードインするようになっています。私はCSSコードを適用しましたが、その効果は表示されません。 divは表示されますが、フェードインはありません。

また、私はCSSの移行が実際にIEでは動作しないことを認識しています。もし誰かがそれを回避策の正しい方向で私を指すことができれば、それは非常に高く評価されるだろう。 （：

CSS：

.thumbnail{ 
position: relative; 
z-index: 0; 
} 

.thumbnail:hover{ 
background-color: transparent; 
z-index: 50; 
} 

.thumbnail span{ /*CSS for enlarged image*/ 
position: relative; 
display: none; 
color: black; 
text-decoration: none; 
opacity:0.0; 
filter:alpha(opacity=0); 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
border-width: 0; 
padding: 5px; 
left: -1000px; 
border: 1px solid gray; 
background-color: #fff; 
} 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 
position: relative; 
display: inline; 
top: -290px; 
left: -25px; 
opacity:1.0; 
filter:alpha(opacity=100);/*position where  
enlarged image should offset horizontally */ 
-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 
} 

#networking { 
width: 200px; 
height: 140px; 
margin-left: 360px; 
top: 115px; 
position: absolute; 
background-color: #613286; 
opacity:1.0; 
filter:alpha(opacity=100); 
color: #ffffff; 
text-align:center; 
border-radius: 20px; 
-webkit-transform: rotate(14deg); 
-moz-transform: rotate(14deg); 
-ms-transform: rotate(14deg); 
-o-transform: rotate(14deg); 
transform: rotate(14deg); 
} 

HTML：！あなたは不透明度0を持っていたよう

.thumbnail span{ /*CSS for enlarged image*/ 
    position: relative; 

    /*display: none; remove this */ 

    color: black; 
    text-decoration: none; 
    opacity:0.0; 
    filter:alpha(opacity=0); 
} 

：

<div id="networking"> 
<a class="thumbnail" href="1.5.2experientialstudios.html#down4"><h4>Networking Lounge</h4>  
<span><img src="images/net3.jpg" width="250" /></span></a> 
</div> 

ありがとう

Answer 1

あなたの表示ルールを削除して試してみてくださいあなたは表示する必要はありません：なし別のタイプであるため、表示されていない状態からインライン状態に遷移することはできません。

そして、このルール変更：（それは少しびくびくすることができますホバーし、その後スパン）

.thumbnail:hover span { /*CSS for enlarged image on hover*/ 

    top: 0px; /* adjust as needed */ 
    left: -25px; 
    opacity:1.0; 
    filter:alpha(opacity=100);/*position where  
    enlarged image should offset horizontally */ 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

を。

また、トランジションにms接頭語を追加しました。明らかにこの文脈では有用ではない。

IE9以下では、jQueryを使用して要素をフェードイン（または単純にバニラJavaScriptを使用してsetTimeoutループで不透明度を変更することができます）。ここ

フィドル：
http://jsfiddle.net/AbdiasSoftware/9rCQv/

は、これはあなたが後にしている何ですか？