Card Focus

This is a fairly simple effect to give the appearance of a card 'popping out' of the screen towards the user when focused. In this case focus is given to the card being hovered over. Making the cards shift to the left 'under' the card being focused was fairly simple; transitioning the margins for the focused card to bring the cards on either side in. However, this makes it look like the focused card moves far to the left, and the cards to the left of the focused card remain still. This is where javascript comes in. We add event listeners to each card (except the first) to add/remove a class to the first card that shifts it and all subsequent cards right, moving them under the focused card. We can also target the last card, so that when focused, a special class is added to the first card to shift it further than other card focuses. This makes the behavior of the first and last cards consistent in that all cards shift to move 'under' them. We also transition the box-shadow and z-index to increase the visual effect, and we're done.

One known issue with this implementation is that if a user moves from one card to the next too slowly (slow enough to be right on the line between cards), it causes a stuttering effect between the two cards.

We can also do vertical cards.