'Ello Stackoverflow!Immagine in transizione non styling to object-fit: cover;
Mi chiedo se qualcuno potrebbe aiutarmi a capirlo. Ho trovato this Prima/Dopo il visualizzatore di immagini di Jason Mayes e io stavamo lavorando per centrarlo in modo reattivo.
Quindi ho trovato "object-fit: cover;" e "posizione dell'oggetto: 50% 50%;" lavorare alla grande, ma presto mi sono reso conto che la transizione stessa non veniva disegnata in quel modo, in qualche modo.
ho biforcuta penna di Jason visualizzare in modo più chiaro: http://codepen.io/RogerAntonio/pen/rVXrma
Credo che il problema sta qui da qualche parte:
.container img {
object-fit: cover;
object-position: 50% 50%;
overflow: hidden;
}
.beforeAfter .before {
z-index:2;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
Grazie in anticipo!
Questo funziona per me! E dovrebbe funzionare su IE to (object-fit non è supportato lì). Ho dovuto cambiare un paio di cose per avere sempre le informazioni sempre al top, ma funziona! Grazie! –