ease - transition opacity css

CSS: la transición de desplazamiento de la imagen no funciona con la pantalla none/display: intercambio de imágenes y bloques

Question

Quiero agregar una transición simple de la imagen integrada para el desplazamiento del mouse. El vuelo estacionario funciona bien. Si elimino la pantalla: ninguna, la transición funcionará, pero el intercambio de imagen flotante se desmoronará. Hay alguna idea de cómo arreglar eso ?

Aquí está el CSS que utilicé:

div.effect img.image{
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:block;
}
div:hover.effect img.image{
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:none;
}
div.effect img.hover{
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:none;
}
div:hover.effect img.hover{
display:block;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}

Y aquí está la demostración en vivo (no funciona) para jugar: http://jsfiddle.net/46AKc/65/

Answer 1

Suponiendo que todas las imágenes tienen la misma altura, puede establecer una altura fija en el elemento principal y luego colocarlo relativamente.

.effect {
position:relative;
height:94px;
}

Posicionamiento absoluto de los elementos img y eliminación de la display:none .

div.effect img.image {
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position:absolute;
}

La razón por la que esto funciona es porque los elementos de img hijo están absolutamente posicionados en relación con los padres, colocando de manera efectiva ambas imágenes una encima de la otra. Ya no es necesario cambiar la visualización del elemento, lo que permite que la transición tenga lugar.

EJEMPLO ACTUALIZADO AQUÍ

Alternativamente, si las imágenes no son todas de la misma altura, omita la altura, pero aún así coloque el elemento parental relativamente. A diferencia del posicionamiento absoluto de ambas imágenes, solo coloque una y seguirá funcionando.

EJEMPLO ALTERNATIVO AQUÍ

div.effect img.hover {
opacity: 0;
position:absolute;
top:0;
}

También vale la pena señalar que no es necesario que incluya las propiedades de transición en todos los elementos si tienen los mismos valores. div.effect img.image en div.effect img.image será suficiente.

Eche un vistazo a este ejemplo .