CSS Dissolvenza in apertura al volo stazionario

Question

Attualmente sto tentando di ottenere una dissolvenza in un'immagine quando passo il mouse su un testo utilizzando CSS. Ho applicato il codice CSS, ma l'effetto non viene mostrato; il div appare, ma senza la dissolvenza in apertura.

Inoltre, mi rendo conto che le transizioni CSS non funzionano realmente con IE. Se qualcuno potesse indicarmi la giusta direzione per una soluzione alternativa, sarebbe molto apprezzato. (:

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> 

Grazie

Answer 1

Prova a rimuovere la regola di visualizzazione:

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

    /*display: none; remove this */ 

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

Come avete opacità 0 non avrai bisogno di display: nessuno e non è possibile effettuare una transizione tra non visualizzato per tutti in linea in quanto sono tipi diversi.

e modificare questa regola:

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

(il passaggio del mouse e poi portata in grado di rendere un po 'jumpy).

Ho anche aggiunto una versione con ms per le transizioni. Apparentemente non è utile in questo contesto.

Per IE9 e versioni successive è possibile utilizzare jQuery per dissolvere in un elemento (o semplicemente utilizzare JavaScript vaniglia per modificare l'opacità in un ciclo setTimeout).

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

E 'questo quello che stai cercando?