transition css opacité de fondu d'arrière-plan
je suis en train de faire un transition où elle se fond en blanc transparent, quand un utilisateur plane sur une image.
Mon problème est que j'ai besoin de changer la couleur, qu'elle se fane, noir. J'ai essayé tout simplement de simplement ajouter background:black; pour la classe qui contient le transition, mais ça ne marche pas de façon inattendue, ça s'efface toujours en blanc transparent.
Le code css que j'utilise est:
.hover:hover {
opacity: 0.2;
}
.item-fade {
background: black;
opacity: 0.8;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}<p>Hover image, the white opacity needs to be black :/</p>
<img src="//placehold.it/100x100" class="hover item-fade" />4 réponses
Enveloppez votre image dans un SPAN élément qui a le background: black;
.imgHolder{
display: inline-block;
background: #000;
}
.item-fade{
vertical-align: top;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
opacity: 1;
}
.item-fade:hover{
opacity: 0.2;
}<span class="imgHolder">
<img class="item-fade" src="http://placehold.it/100x100/cf5" />
</span>il ne s'efface pas en "noir transparent" ou "blanc transparent". C'est juste montrer quelle couleur est "derrière" l'image, qui est la couleur de fond de l'image - cette couleur est complètement cachée par l'image.
si vous voulez passer au noir(ish), vous aurez besoin d'un contenant noir autour de l'image. Quelque chose comme:
.ctr {
margin: 0;
padding: 0;
background-color: black;
display: inline-block;
}
et
<div class="ctr"><img ... /></div>
.container{
display:inline-block;
padding:5px;/*included padding to see background when img apacity is 100%*/
background-color:black;
opacity: 1;
}
.container:hover{
background-color:red;
}
img{
opacity: 1;
}
img:hover{
opacity: 0.7;
}
.transition{
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s
}
Veuillez noter que le problème n'est pas white la couleur. C'est parce que c'est d'être transparent.
Lorsqu'un élément est rendu transparent, toute l'opacité de son élément enfant; filtre alpha dans IE 6 7 etc, est changée à la nouvelle valeur.
vous ne pouvez donc pas dire qu'il est blanc!
vous pouvez placer un élément au-dessus de lui, et changer la transparence de cet élément en 1 tout en changeant la transparence de l'image en .2 ou quoi que ce soit que vous voulez.