How to create responsive stacked card hover effect using CSS?


Card-style design is better than others in terms of functionality and aesthetics. To suit the needs of different screen sizes, the card design can assist users focus on specific content very easily, as well as enabling designers to put up the content reasonably and clearly throughout design. The disorganised website is a pain. When we organise various types of elements on the page, the card design can provide a great order for the layout of these contents. This is beneficial to both designers and users. The card design is incredibly versatile and may be used for practically any purpose in any sector.

In this article, we will use HTML and CSS to construct a responsive stacked cards hover effect.

Steps to be Followed

  • First, create a simple card structure using HTML.

  • Use CSS for styling the basic structure of the card.

  • To create the stacking effect, we will use the: before and: after pseudo classes as well as CSS position property.

  • To make the cards move away from the upper one, use CSS transform property.

  • To give the hovering effect, we will use transform property to the cards.

Example

In the given example, when the user hovers over a card, the top-most card will translate over the X-axis as well as Y-axis, here (10px-X-axis, 10px-Y-axis) bottom-right direction, and the bottom-most stacked card will translate towards (-X)-axis as well as (-Y)-axis, which will create multiple stacked-bottom-right effects. This is done using the :before and :after pseudo elements.

<!DOCTYPE html>
<html>
<head>
   <title> Stacked Cards hover effect </title>
   <style>
      body {
         font-family: sans-serif;
         color: #5c5957;
         background: #e2d9d5;;
         margin-top: 70px;
      }
      h1{
         text-align: center;
      }
      .card {
         position: relative;
         cursor: pointer;
         max
         -width: 380px;
         margin: 70px auto;
      }
      .card::before,
      .card::after {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
      .card::before,
      .card::after,
      .card .card
      -inner {
         background
         -color: white;
         border: 2px solid #e2d9d5;
         border
         -radius: 7px;
         transition: transform 0.5s;
      }
      .card::before,
      .card
      -inner {
         z
         -index: 1;
      }
      .card
      -inner {
         position: relative;
         padding: 60px;
      }
      .card-top::before {
         transform: translate(
            calc(-1 * 8px),
            calc(-1 * 8px)
         );
      }
      .card-top::after {
         transform: translate(
            calc(-1 * 16px),
            calc(-1 * 16px)
         );
      }
      .card-top:hover::before,
      .card-top:hover::after,
      .card-top:hover .card-inner {
         transform: translate(calc(-1 * 8px), 0);
      }
   </style>
</head>
<body>
   <h1> Stacked Cards Hover Effects </h1>
   <div id= "card-wrap">
      <div class= "card card-top">
         <div class= "card-inner">
            <h3 id= "card-heading"> Stacked cards </h3>
            <div id= "card-body"> This is an example. </div>
         </div>
      </div>
   </div>
</body>
</html>

Example

Here, we have used the box-shadow property, animation and transition property of CSS.

  • Create a container and add 4 div elements to it. These 4 elements will be the cards.

  • Create a bar in each of the card. Add linear gradient to the bar.

  • Style the cards using CSS. Position them accordingly in order to stack them.

  • On hovering, place them according to create a transition effect.

<!DOCTYPE html>
<html>
<head>
   <title> Stacked cards </title>
   <style>
      body {
         background-color: rgba(16, 14, 23, 1);
         font-family: 'Times New Roman', sans-serif;
      }
      #box {
         display: flex;
         position: absolute;
         top: 58px;
         left: calc(50% - 300px);
         padding: 5px;
         height: 280px;
         width: 590px;
      }
      #card {
         display: flex;
         position: relative;
         left: 0px;
         height: 290px;
         width: 210px;
         border-radius: 15px;
         box-shadow: -3px 0 6px black;
         background-color: rgba(23, 20, 29, 1);
         transition: 0.6s ease-out;
      }
      #card:not(:first-child) {
         margin-left: -40px;
      }
      #card:hover {
         transform: translateY(-25px);
         transition: 0.7s ease-out;
      }
      #card:hover ~ #card {
         position: relative;
         left: 48px;
         transition: 0.7s ease-out;
      }
      .heading {
         position: absolute;
         left: 21px;
         top: 16px;
         color: white;
         font-family: Georgia;
         font-weight: 300;
         letter-spacing: 1px;
      }
      h3{
         text-align: center;
         position: relative;
         top: 80%;
         color: white;
      }
      #bar {
         position: absolute;
         top: 90px;
         left: 16px;
         height: 6px;
         width: 140px;
      }
      .emptybar {
         background-color: rgba(46, 49, 51, 1);
         width: 100%;
         height: 100%;
      }
      .filledbar {
         position: absolute;
         top: 0px;
         z-index: 2;
         width: 0px;
         height: 100%;
         background: rgb(10,158,237);
         background: linear-gradient(90deg, #009bd9 0%, #d99345 60%, #ffda00 100%);
         transition: 0.7s ease-out;
      }
      #card:hover .filledbar {
         width: 130px;
         transition: 0.7s ease-out;
      }
   </style>
</head>
<body>
   <div id= "box">
      <div id= "card">
         <h3 class= "heading"> Card 1 </h3>
         <div id= "bar">
            <div class= "emptybar"> </div>
            <div class= "filledbar"> </div>
            <h3> Hello World </h3>
         </div>
      </div>
      <div id= "card">
         <h3 class= "heading"> Card 2 </h3>
         <div id= "bar">
            <div class= "emptybar"> </div>
            <div class= "filledbar"> </div>
            <h3> Hello World </h3>
         </div>
      </div>
      <div id= "card">
         <h3 class= "heading"> Card 3 </h3>
         <div id= "bar">
            <div class= "emptybar"> </div>
            <div class= "filledbar"> </div>
            <h3> Hello World </h3>
         </div>
      </div>
   </div>
</body>
</html>

Importance of Card-based elements in web design

  • Cards are appealing and uncomplicated, allowing for less information. They are responsive and alluring since mobile adaptability is a key factor.

  • Due to space constraints, cards are easier to read than longer pieces of text, and readers who wish to read more can do so by pressing the action button.

  • Cards may be shared in content bursts across a variety of social networks and platforms.

  • Cards cannot be divided into categories based on certain aesthetics because they complement all things and all kinds of designs.

  • In magazines, cards can be set up in a hierarchical pattern and even remain totally scrollable. They do call for extraordinary development skills, as well as lots of interactions and usability.

Conclusion

Cards can be any size, colour, or shape. However, they all have pictures, icons, and some basic text information, such as a title, user name, and location. Without a doubt, the card kind is ideal for both PCs and mobile phones. Card design has become a prominent trend in web design, from online shopping malls to social media sites. Using CSS, you can design various creative cards for your website.

Numerous social media platforms are switching to cards in the real world. In order to include multimedia in line with tweets, Twitter has introduced Cards. Content is increasingly frequently shown in card format. Google is exploring a new method of information delivery with Google Now, moving away from search and toward the use of mobile devices.

Cards are crucial to Pinterest, whereas cards are used by Spotify's Discover function. In order to deliver information, Facebook is now employing cards and information snippets.

Updated on: 22-Feb-2023

673 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements