Skip to main content
2 de 2
Convertido en fragmento ejecutable
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

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>