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
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.
<div class="card__full"> which makes the full card expand from the center of the screen.