Estoy aprendiendo CSS y tengo este código:
.poster {
width: 250px;
position: relative;
}
.poster img {
width: 100%;
display: block;
}
.caption {
position: absolute;
color: #fff;
top: -100%;
width: 100%;
/*padding: 10px 0;*/
text-align: center;
background: rgba(0, 0, 0, 0.8);
margin: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: all .3s;
overflow: hidden;
}
.poster:hover .caption {
top: 0;
}
<div class="poster">
<img class="img" src="https://s-media-cache-ak0.pinimg.com/originals/57/21/ee/5721eee76f2677a139062eb906761f09.jpg" alt="" />
<p class="caption">Star Wars - Pelicula de 1970</p>
</div>
Sin embargo, el overflow:hidden
no funciona ya que no oculta completamente el párrafo para que se pueda lograr la animación.
Sé que para que funcione y se oculte un objeto posicionado en ABSOLUTE su acentro tiene que ser RELATIVE, pero aun asi no funciona.