CSS Zanikanie na hover

Question

Obecnie próbuję mieć z obrazu zanikanie po umieszczeniu wskaźnika nad tekstem przy użyciu CSS. Zastosowałem kod CSS, ale efekt nie jest wyświetlany; pojawia się div, ale bez zanikania.

Ponadto zdaję sobie sprawę, że przejścia CSS nie działają z IE. Jeśli ktokolwiek mógłby wskazać mi właściwy kierunek obejścia tego problemu, byłoby to bardzo cenne. (:

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:

<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> 

Dziękuję

Answer 1

Spróbuj z wyjęciem reguły wyświetlania:

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

    /*display: none; remove this */ 

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

Jak masz krycie 0 nie potrzebujesz wyświetlacza: brak i nie można dokonać przejścia między nie wyświetlającymi się wcale, aby wstawić, ponieważ są one różne.

i modyfikacji tej zasady:

.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; 
} 

(najechania kursorem i następnie przedział może to nieco nerwowy).

Dodałem również wersję z przedrostkiem ms do przejść. Najwyraźniej nie jest to przydatne w tym kontekście.

Dla IE9 i poniżej można użyć jQuery, aby zaniknąć w elemencie (lub po prostu użyć JavaScriptu wanilii, aby zmodyfikować krycie w pętli setTimeout).

Fiddle tutaj:
http://jsfiddle.net/AbdiasSoftware/9rCQv/

Czy to Ty jesteś po?