3

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.

1 respuesta 1

6

El problema es que estás aplicando el overflow:hidden al elemento incorrecto. No es el párrafo el elemento cuyo contenido sobrante debe estar oculto, es su padre (.poster). Entonces, haz que .poster tenga overflow:hidden y eso solucionará el problema:

.poster {
  width: 250px;
  position: relative;
  overflow: hidden;
}

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

1
  • Muchas gracias. Fue un error tonto pero ya se me quedara grabado. :D Commented el 10 nov. 2017 a las 19:18

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.