Mira lo que he probado en local, a ver si te vale algo así, lo he hecho solo con html y css.
Basicamente para evitar que la foto crezca y desaparezca, he creado una capa transparente que es digamos sobre la que usas la pseudo clase :hover
Si quisieras que las fotos sean responsives o no desentonen mucho, usa divs en vez de img con backgrounds-image.
.Objeto{
width: 250px;
height: 250px;
background: red;
position: relative;
}
.Objeto > img, .transparent {
position: absolute;
top: 0;
left: 0;
}
.hidden {
width: 0;
height: 0;
transition: all 400ms linear;
}
.visible {
width: 100%;
height: 100%;
transition: all 150ms linear;
}
.transparent:hover + .visible{
opacity: 0;
}
.transparent:hover ~ .hidden {
width: 100%;
height: 100%;
}
.transparent {
z-index: 9999;
width: 100%;
height: 100%;
background: transparent;
}
<div class="Objeto">
<div class = "transparent"></div>
<img class = "visible" src = "https://www.ranchomagico.com.mx/blog/wp-content/uploads/2017/02/pinguino-emperador4-730x410.jpg"/>
<img class = "hidden" src = "https://cuantoviven.net/wp-content/uploads/2016/09/cuanto-viven-los-canguros.jpg"/>
</div>