Quick Tip: How to Build a Simple Stack Hover Effect With CSS

Quick Tip: How to Build a Simple Stack Hover Effect With CSS

A commonly seen design pattern is to have a card container with other cards underneath it, resulting in a multi-layer stacking effect. Then, during the hover state, the cards smoothly disappear or change their default position. In this short tutorial, we’ll learn a simple CSS technique for creating such an effect.

As usual, let’s have a first look at our demo (scroll through to see all the examples):

1. Begin With the HTML Markup

We’ll start with the .card-wrapper element which will include all the cards. 

Each card, which is represented by the card class, will contain the .card-inner element. Inside that element, we’ll put the contents of the target card:

Depending on the hover effect we want to achieve, each class will receive one of the following classes:

  • card-top-left
  • card-top-right
  • card-bottom-left
  • card-bottom-right
  • card-diagonal-from-right
  • card-diagonal-from-left
  • card-rotate
  • card-perspective
  • card-origin

2. Define the Styles

With the markup ready, we’ll set up a few CSS variables and reset styles:

To create the stacking effect, we’re going to take advantage of the pseudo-elements. For each card we’ll define the ::before and ::after pseudo-elements and absolutely position them relative to the parent card. 

Next, we’ll move them away from their original position by using the transform property. For the first six examples in the demo, the amount of this reposition will be determined by the offset-before and offset-after variables.

Another thing to note is that we give z-index: 1 to all .card-inner elements so that they always sit on top of their pseudo-elements.

Here’s the card layout when the value of the offset-before variable is 8px and the value of the offset-after variable is 16px:

The stacking effect with pseudo-elements

And here’s the layout when those variables double their values:

The stacking effect with pseudo-elements

The required CSS styles for creating the card layout:

As said, each card includes a second class that handles its initial offsets along with the hover effect. For example, here are the extra rules that fire for a card that contains the card-top-left class:

Conclusion

And we’re done, folks! In this quick tutorial, we went through a simple CSS approach for creating card stack hover effects.

Here’s a reminder of what we built:

Have you ever implemented this kind of layout? If so, what technique did you use? Join the discussion in the comments below!

As always, thanks a lot for reading!

Next Level CSS Hover Effects

  • Navigation Design
    How to Build a Shifting Underline Hover Effect With CSS and JavaScript
    George Martsoukos
  • CSS Grid Layout
    Solving Problems With CSS Grid and Flexbox: The Card UI
    Ian Yates
  • CSS
    CSS Hover Effects: Techniques for Creating a Text “Wipe Fill”
    George Martsoukos
  • CSS
    5 CSS Projects: Image Hover Effects
    Adi Purdila

Go to Source
Author: George Martsoukos