examples - css transición opacidad desvanecimiento de fondo

transition opacity css

Question

Estoy haciendo una transition en la que se desvanece en blanco transparente, cuando un usuario está desplazando una imagen.

Mi problema es que necesito cambiar el color, que se desvanece, a negro. He intentado simplemente añadir background:black; para la clase que contiene la transition , pero no funciona de forma desagradable, todavía se está desvaneciendo en blanco transparente.

El código css que estoy usando es:

.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" />

Answer 1

Envuelve tu imagen en un elemento SPAN que tenga el 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>

Answer 2

No se está desvaneciendo a "negro transparente" o "blanco transparente". Solo muestra el color que está "detrás" de la imagen, que no es el color de fondo de la imagen; ese color está completamente oculto por la imagen.

Si desea cambiar a negro (ish), necesitará un contenedor negro alrededor de la imagen. Algo como:

.ctr {
margin: 0;
padding: 0;
background-color: black;
display: inline-block;
}

y

<div class="ctr"><img ... /></div>

Answer 3

Tenga en cuenta que el problema no es de color white . Es porque está siendo transparente.

Cuando un elemento se hace transparente, toda la opacidad de su elemento hijo; El filtro alfa en IE 6 7, etc., se cambia al nuevo valor.

¡Así que no puedes decir que es blanco!

Puede colocar un elemento sobre él y cambiar la transparencia de ese elemento a 1 mientras que cambia la transparencia de la imagen a .2 o lo que quiera.

Answer 4

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
}