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

Question

I have a container which I'd like to expand to reveal content that is absolutely positioned to the bottom right corner once the container is fully expanded.

Expanding a container is pretty simple using CSS.

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

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

The tricky part is revealing the content within it. Using simple absolute positioning isn't working as the content fixes to the bottom right of the container regardless of it's size, so it moves with the corner of the container as it grows.

Here's a quick GIF example of what I'd like to achieve: http://imgur.com/pRneSJr but my reveal will be smooth from corner to corner.

I've a pen here: http://codepen.io/abbasinho/pen/QyrZOm?editors=1100 that shows the container animation. But you'll see my issue with the content.

Any help would be gratefully received.

Answer 1

Boom. There 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;
}