Open In App

Modern CSS Cards

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


Last Updated : 29 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads