web-dev-qa-db-fra.com

css transition opacité fondu à l'arrière-plan

Je fais un transition où il passe au blanc transparent lorsqu'un utilisateur survole une image.

Mon problème est que je dois changer la couleur, qu'elle passe au noir. J'ai simplement essayé d'ajouter background:black; à la classe qui contient le transition, mais cela ne fonctionne pas mal, il passe toujours au 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" />
cssbackgroundopacitytransition
26
simon

Enveloppez votre image dans un élément SPAN 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>
52
Roko C. Buljan

Cela ne passe pas au "noir transparent" ou au "blanc transparent". Cela montre simplement quelle que soit la couleur "derrière" l'image, qui est pas la couleur d'arrière-plan de l'image - cette couleur est complètement masquée par l'image.

Si vous souhaitez passer au noir (ish), vous aurez besoin d'un conteneur 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>
4
Paul Roub

http://jsfiddle.net/6xJQq/13/

.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 

}
2
kasper Taeymans

Veuillez noter que le problème n'est pas la couleur white. C'est parce que c'est transparent.

Lorsqu'un élément est rendu transparent, toute l'opacité de son élément enfant; filtre alpha dans IE 6 7 etc. est remplacé par la nouvelle valeur.

Donc, vous ne pouvez pas dire que c'est blanc!

Vous pouvez placer un élément au-dessus de celui-ci et changer la transparence de cet élément en 1 en modifiant la transparence de l'image en .2 ou tout ce que vous voulez.

0
Afzaal Ahmad Zeeshan