Open In App

Modern CSS Cards

Last Updated : 29 Jan, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

A card is a flexible box containing some padding around the content. It includes the animation which displays only the useful information to the user. It replaces the use of panels, wells, and thumbnails. It can be used in a single container called a card. To make animated Modern CSS Cards, you need to have a bit of HTML and CSS Knowledge as well, as it would be useful for creating it.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS Cards</title>
    <link rel="stylesheet" href='./index.css' />
</head>
  
<body>
    <div class="container">
        <div class="card">
            <div class="content">
                <h2 class="title">Data Structures</h2>
                <p class="data">
                    A data structure is a particular way 
                    of organizing data in a computer so 
                    that it can be used effectively.
                </p>
            </div>
        </div>
  
        <div class="card">
            <div class="content">
                <h2 class="title">Algorithms</h2>
                <p class="data"
                    Algorithm refers to a set of 
                    rules/instructions that step-by
                    -step define how a work is to be
                    executed upon in order to get the 
                    expected results.
                </p>
            </div>
        </div>
  
        <div class="card">
            <div class="content">
                <h2 class="title">Python</h2>
                <p class="data">
                    Python is a high-level, general-
                    purpose and a very popular 
                    programming language.
                </p>
            </div>
        </div>
  
        <div class="card">
            <div class="content">
                <h2 class="title">Java</h2>
                <p class="data">
                    Java is one of the most popular 
                    and widely used programming language.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>


index.css: This file contains all the CSS Styling rules to create the custom animated sidebar.

CSS




* {
    box-sizing: border-box;
}
  
body {
    display: grid;
    place-items: center;
}
  
.container {
    display: grid;
    grid-gap: 1rem;
    padding: 1rem;
    grid-template-columns: repeat(4, 1fr);
}
  
.card {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    text-align: center;
    color: white;
    border-radius: 10px;
    box-shadow: 
        0 1px 1px rgba(0, 0, 0, 0.1), 
        0 2px 2px rgba(0, 0, 0, 0.1), 
        0 4px 4px rgba(0, 0, 0, 0.1), 
        0 8px 8px rgba(0, 0, 0, 0.1), 
        0 16px 16px rgba(0, 0, 0, 0.1);
    height: 350px;
}
  
.card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: 0 0;
    transition: transform 
        calc(var(850ms) * 1.5
        var(cubic-bezier(0.19, 1, 0.22, 1));
}
  
.card:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-image: linear-gradient( 
        to bottom, rgba(0, 0, 0, 0) 0%
        rgba(0, 0, 0, 0.009) 11.7%
        rgba(0, 0, 0, 0.034) 22.1%
        rgba(0, 0, 0, 0.072) 31.2%
        rgba(0, 0, 0, 0.123) 39.4%
        rgba(0, 0, 0, 0.182) 46.6%
        rgba(0, 0, 0, 0.249) 53.1%
        rgba(0, 0, 0, 0.32) 58.9%
        rgba(0, 0, 0, 0.394) 64.3%,
        rgba(0, 0, 0, 0.468) 69.3%
        rgba(0, 0, 0, 0.54) 74.1%
        rgba(0, 0, 0, 0.607) 78.8%
        rgba(0, 0, 0, 0.668) 83.6%
        rgba(0, 0, 0, 0.721) 88.7%
        rgba(0, 0, 0, 0.762) 94.1%
        rgba(0, 0, 0, 0.79) 100%);
    transform: translateY(-50%);
  
    transition: transform calc(var(850ms) * 2
        var(cubic-bezier(0.19, 1, 0.22, 1));
}
  
.card:nth-child(1):before {
    background-image: linear-gradient(
        to bottom right, #0F2027, #2C5364);
}
  
.card:nth-child(2):before {
    background-image: linear-gradient(
        to bottom right, #333333, #dd1818);
}
  
.card:nth-child(3):before {
    background-image: linear-gradient(
        to bottom right, #0f0c29, #24243e);
}
  
.card:nth-child(4):before {
    background-image: linear-gradient(
        to bottom right, #000046, #1CB5E0);
}
  
.content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem;
    transition: transform var(850ms) 
        var(cubic-bezier(0.19, 1, 0.22, 1));
    z-index: 1;
}
  
.title {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.2;
}
  
.data {
    margin-top: 1rem;
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.35;
}
  
.card:after {
    transform: translateY(0);
}
  
.content {
    transform: translateY(calc(100% - 4.5rem));
}
  
.content>*:not(.title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform var(850ms) 
        var(cubic-bezier(0.19, 1, 0.22, 1)), 
        opacity var(850ms) 
        var(cubic-bezier(0.19, 1, 0.22, 1));
}
  
.card:hover,
.card:focus-within {
    align-items: center;
}
  
.card:hover:before,
.card:focus-within:before {
    transform: translateY(-4%);
}
  
.card:hover:after,
.card:focus-within:after {
    transform: translateY(-50%);
}
  
.card:hover .content,
.card:focus-within .content {
    transform: translateY(0);
}
  
.card:hover .content>*:not(.title),
.card:focus-within .content>*:not(.title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(850ms) / 8);
}


Output:

Supported Browsers:

  • Google Chrome
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari


Similar Reads

Materialize CSS Cards
Cards are a convenient means of displaying different types of relevant content. Materialize uses cards for presenting similar objects whose sizes and actions can be changed with the requirement. Here is an example of a basic card. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Page Title&lt;/title&gt; &lt;/head&gt; &lt;body
7 min read
W3.CSS Cards
A card is a flexible and extensible content container. It can include header, footer and a wide variety of content. W3.CSS helps the developers to add paper-like effects to the elements. It contains three types of classes: Sr. No. Class Name Description 1. w3-card It is used to add a box shadow of 2px to the element. 2. w3-card-2 It is same as the
3 min read
How to create responsive stacked cards hover effect using CSS ?
Introduction: Cards are a very important part of any website. It is used to display some important information in short to viewers. In this article, we will create responsive stackend cards hover effect using HTML and CSS. In order to achieve a multi-layer stacking effect, you have to follow certain steps which are given below. Note: Through hover
6 min read
Bootstrap 5 Cards Sizing using custom CSS
Bootstrap 5 card component provides a flexible and extensible content container with multiple variants and options. It includes options for headers and footers. Cards support a wide variety of content, including images, text, list groups, links, and more. Cards using custom CSS is used to set the custom CSS styles in external stylesheets or as inli
2 min read
How to create Expanding Cards using HTML, CSS and Javascript ?
Creating expanding cards using HTML, CSS, and JavaScript involves creating a set of cards that expand when clicked. ApproachSelection of Sections:The code starts by selecting all HTML elements with the class 'section' using the document.querySelectorAll('.section') method.This creates a NodeList containing all elements with the specified class.Even
2 min read
How to Create Responsive Column Cards with CSS ?
Creating a responsive card layout is very beneficial in development. These cards are a great way to display content in a neat and organized manner. You can create responsive cards using the below approaches. Table of Content Using FlexboxUsing CSS GridUsing FlexboxThe display: flex property establishes a flex container, enabling flexbox layout for
3 min read
Create Responsive Column Cards with CSS
Column cards showcase articles, products, or user profiles attractively. Learning these techniques will help beginners and intermediate developers understand CSS better, creating responsive and attractive layouts. In this article, we'll explore different ways to make column cards responsive with CSS. Using CSS GridWe can create responsive column ca
3 min read
Bootstrap | Cards
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. It replaces the use of panels, wells and thumbnails. All of it can be used in a single container called card. Basic Card: The building block of a card is the card-
6 min read
Bootstrap 4 | Cards
A Bootstrap card is a flexible box containing some padding around the content. It includes the options for headers and footers, color, content, and powerful display options. It replaces the use of panels, wells, and thumbnails. It can be used in a single container called card. Basic Card: The .card and .card-body classes are used to create basic ca
7 min read
How to place two bootstrap cards next to each other ?
Bootstrap is the most popular, free, and open-source HTML, CSS framework that is used to make a responsive website and make them beautiful. It provides various classes to work with that can be used to make a website beautiful. It also provides classes for creating cards. Cards: A card is a flexible and extensible content container. It includes opti
3 min read
Article Tags :