CSS Fondu sur hover

Je suis en train d'essayer d'avoir un avec une image en fondu quand j'ai survoler un peu de texte à l'aide de CSS. J'ai appliqué le code CSS, mais l'effet ne se présente pas, la div s'affiche, mais sans le fondu.

Je me rends compte aussi que les transitions CSS ne fonctionnent pas vraiment avec IE. Si quelqu'un pouvait me diriger dans la bonne direction d'une solution de contournement pour cela, il serait très apprécié. (:

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>

Merci!

OriginalL'auteur Bliss L. Ng | 2013-07-10

  1. 11

    Essayer avec la suppression de votre règle d'affichage:

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

    Que vous avez l'opacité 0 vous n'aurez pas besoin display:none et vous ne pouvez pas faire une transition entre pas affiché à tous pour inline comme ils sont de types différents.

    Et de modifier cette règle:

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

    (hover et puis span pouvez la rendre un peu nerveux).

    j'ai aussi ajouté un ms préfixé version de transitions. Il n'est apparemment pas très utile dans ce contexte.

    Pour IE9 et ci-dessous, vous pouvez utiliser jQuery pour réaliser un fondu en un élément (ou tout simplement utiliser de la vanille JavaScript pour modifier l'opacité dans un setTimeout boucle).

    Violon ici:

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

    Est-ce que vous êtes après?

    Salut, oui, il fonctionne très bien! Merci!!!! Petite question - est ce que le ms-préfixés version de travail dans les anciennes versions d'IE? Ou est-il un moyen de le faire travailler sur les anciennes versions d'IE, par exemple, IE 8/9?
    (transition) ne fonctionne pas avec IE8, pour sûr, et je ne suis pas sûr d'environ 9+ (je n'ai pas IE9+, donc je ne peux pas tester), mais je soupçonne que cela ne fonctionne qu'avec IE10.
    Merci pour la réponse! Encore nous l'espérons vous cherchez un moyen de faire ce travail dans IE 8/9 ainsi, mais je vous remercie beaucoup!
    vous ne serez pas en mesure d'utiliser les transitions avec IE8 (éventuellement 9), mais de vérifier jQuery et le fadeIn/Out fonctions (ou vous pouvez utiliser un de vanille fonction Javascript pour modifier l'opacité de style avec un délai d'attente).
    Microsoft Internet Explorer 9 et ci-dessous ne prennent pas en charge les transitions via css. Deuxièmement, il n'y a pas besoin d'utiliser l'-ms-transition préfixe. Ce n'est pas un bon vendeur extension de cette règle

    OriginalL'auteur