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

html:

<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>

Y el css:

.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>
   .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;
    }
 

html:

<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>

Y el css:

   .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;
    }

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

Origen Enlace

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.

html:

<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>

Y el css:

   .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;
    }