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
Vous devez vous connecter pour publier un commentaire.
Essayer avec la suppression de votre règle d'affichage:
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:
(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?
(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