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>