Animate a div to show absolutely positioned content using CSS and / or jQuery

Question

I have a container that I would like to expand to show content that is absolutely located in the lower right corner after the container has expanded completely.

Extending a container is pretty straightforward using CSS.

@keyframes test-grow {
  100% {
    width: 100%;
    height: 30rem;
  }  
}

.test {
  width: 2rem;
  height: 2rem;
  animation: test-grow 5s forwards;
}

The hard part is the disclosure of the contents within it. Using simple absolute positioning does not work, because the content is fixed in the lower right corner of the container, regardless of its size, so it moves with the corner of the container as it grows.

Here is an example of a quick GIF of what I would like to achieve: http://imgur.com/pRneSJr , but my readings will be smooth from corner to corner.

: http://codepen.io/abbasinho/pen/QyrZOm?editors=1100, . .

.

Answer 1

Boom. ya go

.test {
  position: relative;
  width: 2rem;
  height: 2rem;
  background: rgba(white, 0.5);
  animation: test-grow 5s forwards;
  overflow:hidden;
}

h1 {
  font-family: Helvetica Neue, Helvetica, Arial;
  font-weight: bold;
  font-size: 200px;
  position: absolute;
  top:  18rem;
  left: 28rem;
}