Material Deign inspired information cards.

How it works

When someone clicks a card we move it to the center of the screen along the vertical axis. Once it reaches the center of the screen, the full card view expands from the center of the screen. The full card view, <div class="card__full"> is in a fixed position always on top of the list of cards. We hide it by using CSS transforms, in this case transform: scaleY(0).

jQuery

To calculate how far we need to move the card to the center of the screen we subtract the .offset().top value of the card from half of the window height. We use this value for the transform: translateY() property of the card.

Next we .addClass() to <div class="card__full"> which makes the full card expand from the center of the screen.