3

Lo que quiero hacer no sé cómo se dirá pero lo explicaré: es poner dos imágenes una encima de otra cosa que la de atrás esté oculta y la del frente visible. Al pasar el cursor encima de la imagen de frente se oculte y se ponga visible lo que está atrás pero que vaya creciendo con una animación.

Ejemplo:

.Objeto{
    width: 250px;
    height: 250px;
    background: red;
    transition: 1s ease-in-out;
}
.Objeto:hover{
    width: 350px; 
    height: 350px; 
}
<div class="Objeto"></div>

Así como crece el objeto quiero que aparezca el imagen de atrás pero el problema surge cuando se oculta, ya que al ocultarse y mover el cursor la imagen aparece y desaparece hasta dejar el cursor detenido.

3
  • ¿Podrías corregir el CSS? Edita tu pregunta, copia y pega el código y luego basta con seleccionarlo y pulsar en el botón de código que tiene dos llaves ({}). Commented el 10 jul. 2018 a las 8:21
  • 1
    Ya he corregido yo el tema del formato de código. ¿Podrías explicar con un ejemplo qué es lo que te ocurre cuando trabajas con imágenes? Sin código y sin verlo es más difícil entenderlo y ayudarte a corregirlo. Commented el 10 jul. 2018 a las 8:36
  • ¿A qué te refieres con creciendo? ¿Te vale con que se difumine una y aparezca otra? Commented el 10 jul. 2018 a las 9:02

2 respuestas 2

3

Te dejo una alternativa a la de Slavis sin capa intermedia que se parece al ejemplo que has dado, para ello me he basado en esta pregunta, pero intercambiando el atributo display por visibility.

El motivo es que el segundo permite el uso de transiciones CSS, por lo demás actúa de forma similar a display:none en que recargan el layout.

Edición: He añadido un suavizado cuando se realiza el hover añadiendo una transición a Objeto y opacity (opacidad) a cada elemento según su estado inicial, pero son totalmente opcionales y es posible no utilizar estos, simplemente se notará más bruscamente el cambio.

.Objeto{
    position:absolute;
    width: 250px;
    height: 250px;
    transition: 1s ease-in-out;
    background: url('https://www.nps.gov/common/uploads/stories/images/nri/20161013/articles/71B2B5D2-1DD8-B71B-0B76C91DF3E21792/71B2B5D2-1DD8-B71B-0B76C91DF3E21792.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.Objeto2{
    position:absolute;
    width: 250px;
    height: 250px;
    transition: 1s ease-in-out;
    visibility: hidden;   
    opacity:0;
    background: url("https://www.publicdomainpictures.net/pictures/40000/velka/mountain-meet-the-sea.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

 .contenedor:hover .Objeto2{
   visibility : visible;
   opacity:1;
   width: 350px; 
   height: 350px;
 }
 .contenedor:hover .Objeto{
   visibility : hidden;   
   opacity:0;
 }
 
<div class="contenedor">
  <div class="Objeto"></div>
  <div class="Objeto2"></div>
</div>

1
  • Oh Muchisimas gracias Yo ponía e hover en la imagen de fondo nunca se me ocurrió ponerlo en el contenedor
    – Trapss
    Commented el 10 jul. 2018 a las 15:27
3

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>

5
  • Buen ejemplo, te lo he arreglado para que se pueda ejecutar directamente aquí Commented el 10 jul. 2018 a las 9:20
  • Gracias, ¿como haces para que se pueda ejecutar aquí?
    – SlavisWolf
    Commented el 10 jul. 2018 a las 9:21
  • Cuando creas una respuesta, hay un botón para insertar un fragmento de código HTML + CSS + JS. También puedes usar el atajo de teclado Ctrl + M Commented el 10 jul. 2018 a las 9:25
  • Muchas Gracias Pablo
    – SlavisWolf
    Commented el 10 jul. 2018 a las 9:27
  • Gracias una forma muy interesante de ver me ayuda a expandir mis conocimientos, de nuevo muchas gracias
    – Trapss
    Commented el 10 jul. 2018 a las 15:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.