0

Espero me puedan ayudar con esta duda que tengo en cuanto a CSS.

Verán, tengo mi elemento padre con un elemento hijo, el cual quiero aparecer cuando el mouse se posicione sobre el elemento padre.

El elemento hijo lo inicializo con una altura de 0px, y al posicionarme sobre el padre cambio la altura del hijo, pero quisiera saber si hay alguna forma de mostrar los elementos del hijo cuando haya alcanzado su altura máxima.

Ejemplo:

.container {
  position: relative;
  width: 300px;
  height: 200px;
  display: flex;
  align-content: center;
  justify-content: center;
  border: 1px solid #FFF;
  background-color: #FFAB91;
  color: #424242;
}

.container:hover .show {
  visibility: visible;
  height: 80px;
}

.container:hover button {
  visibility: visible;
}

.show {
  visibility: hidden;
  position: absolute;
  bottom: 0;
  background-color: #D84315;
  color: #FFF;
  width: 100%;
  height: 0px;
  transition: all 0.5s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  visibility: hidden;
  transition: all .5s ease-in;
}
<div class="container">
  <h5>Categoría 1</h5>
  <div class="show"><button>Ver +</button></div>
</div>
<div class="container">
  <h5>Categoría 2</h5>
  <div class="show"><button>Ver +</button></div>
</div>
<div class="container">
  <h5>Categoría 3</h5>
  <div class="show"><button>Ver +</button></div>
</div>

3
  • He puesto tu código de jsfiddle en la pregunta.
    – user7176
    Commented el 9 feb. 2018 a las 11:56
  • No he entendido bien, en tu ejemplo se ve que ya hace lo que preguntas, no? Podrías ampliar más con una imagen sobre que te refieres o ser un poco más explicito con tu pregunta. Commented el 9 feb. 2018 a las 13:12
  • Genial amigo blonfu, muchas gracias. Edgar Gutiérrez, me referia a aparecer el botón q está en el div hijo cuando éste halla alcanzado los 80 px, en este caso, como se ve en el ejemplo de @Alejandro Gallardo
    – DevPHP
    Commented el 9 feb. 2018 a las 18:21

1 respuesta 1

0

No se si es lo que necesitas pero le agregue una clase btn al button y luego lo anime con keyframes y le puse un delay al botón de 0.6s a continuación te comparto el código.

.container {
	  position: relative;
	  width: 300px;
	  height: 200px;
	  display: flex;
	  align-content: center;
	  justify-content: center;
	  border: 1px solid #FFF;
	  background-color: #FFAB91;
	  color: #424242;
}

	.show {
  position: absolute;
  bottom: 0;
  background-color: #D84315;
  color: #FFF;
  width: 100%;
  height: 0px;
  transition: all 0.5s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
  .container:hover .show{
    height: 80px;
  }
  
  .btn{
  	animation-name: btn;
  	transition-delay: 0.6s;
  	visibility: hidden;
  }
  .container:hover .btn{
    visibility: visible;
  }
  @keyframes btn {
			0% {
				
				opacity: 0;
			}
			100% {
				
				opacity: 1;	
			}
		}
<div class="container">
  <h5>Categoría 1</h5>
  <div class="show">
  	<button class="btn">Ver +</button>
  </div>
</div>
<div class="container">
  <h5>Categoría 2</h5>
  <div class="show">
  	<button class="btn">Ver +</button>
  </div>
</div>
<div class="container">
  <h5>Categoría 3</h5>
  <div class="show">
  	<button class="btn">Ver +</button>
  </div>
</div>

3
  • Hola @AlejandroGallardo, bienvenido a Satck Overflow, te recomiendo te pases por la sección de ayuda para aprender más como se debe responder una pregunta, como editar tus respuestas y el porqué no debes generar más de un post a la misma pregunta cuando ambas respuestas son dependientes una de la otra. Commented el 9 feb. 2018 a las 13:04
  • Yo lo veo igual, cual es la duda del OP? hasta ahora no entiedo. Commented el 9 feb. 2018 a las 13:40
  • Muchas gracias amigo Alejandro, era a lo q me referia
    – DevPHP
    Commented el 9 feb. 2018 a las 18:22

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.