Animated card tiles

The design trend of using “cards” or “tiles” to display interactive sections/article headings in an app or website remains a popular choice among designers. So, let’s build a set of animated cards with only HTML & CSS.

What we will be building (live demo)

This is the set of animated card tiles we will be creating:
(try hovering)

Card Title

Inner card content text

Card Title

Inner card content text

Card Title

Inner card content text

The HTML

For the base skeleton of these cards we only need:

a flexbox main container to hold everything
a .card-tile parent element
the inner child element that will display on :hover
proper h4 and p tags inside that child element

<!-- Flexbox parent container -->
<div class="card-tiles-container">

    <!-- Parent container -->
    <div class="card-tile">

        <!-- Inner child text content -->
        <div class="text-content">

            <!-- Proper tags for accessibility -->
            <h4>Card Title</h4>
            <p>Inner card content text</p>

        </div>

    </div>

</div>

That’s all that is needed – for now. We will be returning to this code shortly to add some extra classes to make our lives easier.

The CSS

First we set the main housing container to use flex so we save ourselves the headache of aligning all the cards in a nice row:

.card-tiles-container {
    display: flex;
    font-size: 14px;
    margin: 20px 0;
}

Next we create the default styling for our tile cards and set the transform property to scale the card on :hover:

/* Default card tile styles */
.card-tile {
    border: 1px solid;
    border-radius: 10px;
    cursor: pointer;
    height: 150px;
    margin: 0 10px;
    overflow: hidden;
    position: relative;
    width: 33.33%;
}
.card-tile:hover {
    transform: scale(1.1);
}

Where are my cards?!

Don’t panic if you can’t visually see any card elements in your demo yet – that’s to be expected. We will be styling these card elements momentarily.

Our next step is to hide the default inner text-content and only show it on hover. We achieve this by setting it’s position to absolute, placing it’s opacity at 0 and pushing it’s z-index back to -1.

When the user hovers over a main card tile, we change the text-content values of both the opacity and z-index to 1.

/* Card tile text content */
.card-tile .text-content {
    background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
    bottom: 10px;
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
                0 2px 4px rgba(0,0,0,0.5);
    height: 65px;
    left: 10px;
    opacity: 0;
    padding: 10px;
    position: absolute;
    width: calc(100% - 20px);
    z-index: -1;
}
.card-tile:hover .text-content {
    opacity: 1;
    z-index: 1;
}

Finally we add some minor styling for the inner header and paragraph tags:

.card-tile .text-content h4,
.card-tile .text-content p {
    color: #fff;
    margin: 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

Don’t forget mobile

We want out UI to stack the cards if users are viewing them on smaller devices:

@media(max-width: 600px) {
    .card-tiles-container {
        flex-direction: column;
    }
    .card-tile {
        margin: 0 0 10px 0;
        width: 100%;
    }
}

Customizing each card

Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it’s own custom coloring:

<div class="card-tiles-container">
    <!-- `Blue` class -->
    <div class="card-tile blue">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
    <!-- `Orange` class -->
    <div class="card-tile orange">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
    <!-- `Green` class -->
    <div class="card-tile green">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
</div>

And these color classes correlate to some new CSS styling:

/* Blue Card */
.card-tile.blue {
    background-color: #0093E9;
    background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
    border-color: #0093E9;
    box-shadow: 0 4px 12px rgba(128,208,199,0.7), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.blue:hover {
    box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}

/* Orange Card */
.card-tile.orange {
    background-color: #FAD961;
    background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
    border-color: #F76B1C;
    box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.orange:hover {
    box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}

/* Green Card */
.card-tile.green {
    background-color: #096e40;
    background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
    border-color: #096e40;
    box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.green:hover {
    box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}

Adding transitions

We can now see the actual cards visually and have the ability to interact with them, but there is a problem – they don’t animate.

Lucky we can target all elements we wish to animate with the transition property, like so:

/* Shared transitions */
.card-tile,
.card-tile .text-content {
    transition: .3s ease all;
}

Done and done.

The final code

To make things easier for reference, I have included all the html and css below. Please feel free to use these cards anywhere you like and change them as you see fit!

HTML

<div class="card-tiles-container">
    <div class="card-tile blue">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
    <div class="card-tile orange">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
    <div class="card-tile green">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
</div>

CSS

.card-tiles-container {
    display: flex;
    font-size: 14px;
    margin: 20px 0;
}

/* Shared transitions */
.card-tile,
.card-tile .text-content {
    transition: .3s ease all;
}

/* Default card tile styles */
.card-tile {
    border: 1px solid;
    border-radius: 10px;
    cursor: pointer;
    height: 150px;
    margin: 0 10px;
    overflow: hidden;
    position: relative;
    width: 33.33%;
}

/* Blue Card */
.card-tile.blue {
    background-color: #0093E9;
    background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
    border-color: #0093E9;
    box-shadow: 0 4px 12px rgba(128,208,199,0.7),
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.blue:hover {
    box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}

/* Orange Card */
.card-tile.orange {
    background-color: #FAD961;
    background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
    border-color: #F76B1C;
    box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.orange:hover {
    box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}

/* Green Card */
.card-tile.green {
    background-color: #096e40;
    background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
    border-color: #096e40;
    box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.green:hover {
    box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}



/* Card tile text content */
.card-tile .text-content {
    background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
    bottom: 10px;
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
                0 2px 4px rgba(0,0,0,0.5);
    height: 65px;
    left: 10px;
    opacity: 0;
    padding: 10px;
    position: absolute;
    width: calc(100% - 20px);
    z-index: -1;
}
.card-tile .text-content h4,
.card-tile .text-content p {
    color: #fff;
    margin: 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

/* All animations on hover */
.card-tile:hover {
    transform: scale(1.1);
}
.card-tile:hover .text-content {
    opacity: 1;
    z-index: 1;
}

@media(max-width: 600px) {
    .card-tiles-container {
        flex-direction: column;
    }
    .card-tile {
        margin: 0 0 10px 0;
        width: 100%;
    }
}

✌️

Post date February 27, 2019

This content originally appeared on Ugly Duck and was authored by Bradley Taunt

What we will be building (live demo)

This is the set of animated card tiles we will be creating:
(try hovering)

Card Title

Inner card content text

Card Title

Inner card content text

Card Title

Inner card content text

The HTML

For the base skeleton of these cards we only need:

a flexbox main container to hold everything
a .card-tile parent element
the inner child element that will display on :hover
proper h4 and p tags inside that child element

<!-- Flexbox parent container -->
<div class="card-tiles-container">

    <!-- Parent container -->
    <div class="card-tile">

        <!-- Inner child text content -->
        <div class="text-content">

            <!-- Proper tags for accessibility -->
            <h4>Card Title</h4>
            <p>Inner card content text</p>

        </div>

    </div>

</div>

That’s all that is needed - for now. We will be returning to this code shortly to add some extra classes to make our lives easier.

The CSS

First we set the main housing container to use flex so we save ourselves the headache of aligning all the cards in a nice row:

.card-tiles-container {
    display: flex;
    font-size: 14px;
    margin: 20px 0;
}

Next we create the default styling for our tile cards and set the transform property to scale the card on :hover:

/* Default card tile styles */
.card-tile {
    border: 1px solid;
    border-radius: 10px;
    cursor: pointer;
    height: 150px;
    margin: 0 10px;
    overflow: hidden;
    position: relative;
    width: 33.33%;
}
.card-tile:hover {
    transform: scale(1.1);
}

Where are my cards?!

Don’t panic if you can’t visually see any card elements in your demo yet - that’s to be expected. We will be styling these card elements momentarily.

When the user hovers over a main card tile, we change the text-content values of both the opacity and z-index to 1.

/* Card tile text content */
.card-tile .text-content {
    background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
    bottom: 10px;
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
                0 2px 4px rgba(0,0,0,0.5);
    height: 65px;
    left: 10px;
    opacity: 0;
    padding: 10px;
    position: absolute;
    width: calc(100% - 20px);
    z-index: -1;
}
.card-tile:hover .text-content {
    opacity: 1;
    z-index: 1;
}

Finally we add some minor styling for the inner header and paragraph tags:

.card-tile .text-content h4,
.card-tile .text-content p {
    color: #fff;
    margin: 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

Don’t forget mobile

We want out UI to stack the cards if users are viewing them on smaller devices:

@media(max-width: 600px) {
    .card-tiles-container {
        flex-direction: column;
    }
    .card-tile {
        margin: 0 0 10px 0;
        width: 100%;
    }
}

Customizing each card

Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it’s own custom coloring:

<div class="card-tiles-container">
    <!-- `Blue` class -->
    <div class="card-tile blue">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
    <!-- `Orange` class -->
    <div class="card-tile orange">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
    <!-- `Green` class -->
    <div class="card-tile green">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
</div>

And these color classes correlate to some new CSS styling:

/* Blue Card */
.card-tile.blue {
    background-color: #0093E9;
    background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
    border-color: #0093E9;
    box-shadow: 0 4px 12px rgba(128,208,199,0.7), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.blue:hover {
    box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}

/* Orange Card */
.card-tile.orange {
    background-color: #FAD961;
    background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
    border-color: #F76B1C;
    box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.orange:hover {
    box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}

/* Green Card */
.card-tile.green {
    background-color: #096e40;
    background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
    border-color: #096e40;
    box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.green:hover {
    box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}

Adding transitions

We can now see the actual cards visually and have the ability to interact with them, but there is a problem - they don’t animate.

Lucky we can target all elements we wish to animate with the transition property, like so:

/* Shared transitions */
.card-tile,
.card-tile .text-content {
    transition: .3s ease all;
}

Done and done.

The final code

To make things easier for reference, I have included all the html and css below. Please feel free to use these cards anywhere you like and change them as you see fit!

HTML

<div class="card-tiles-container">
    <div class="card-tile blue">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
    <div class="card-tile orange">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
    <div class="card-tile green">
        <div class="text-content">
            <h4>Card Title</h4>
            <p>Inner card content text</p>
        </div>
    </div>
</div>

CSS

.card-tiles-container {
    display: flex;
    font-size: 14px;
    margin: 20px 0;
}

/* Shared transitions */
.card-tile,
.card-tile .text-content {
    transition: .3s ease all;
}

/* Default card tile styles */
.card-tile {
    border: 1px solid;
    border-radius: 10px;
    cursor: pointer;
    height: 150px;
    margin: 0 10px;
    overflow: hidden;
    position: relative;
    width: 33.33%;
}

/* Blue Card */
.card-tile.blue {
    background-color: #0093E9;
    background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
    border-color: #0093E9;
    box-shadow: 0 4px 12px rgba(128,208,199,0.7),
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.blue:hover {
    box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}

/* Orange Card */
.card-tile.orange {
    background-color: #FAD961;
    background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
    border-color: #F76B1C;
    box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.orange:hover {
    box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}

/* Green Card */
.card-tile.green {
    background-color: #096e40;
    background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
    border-color: #096e40;
    box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}
.card-tile.green:hover {
    box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
                inset 0 2px 1px rgba(255,255,255,0.6);
}



/* Card tile text content */
.card-tile .text-content {
    background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
    bottom: 10px;
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
                0 2px 4px rgba(0,0,0,0.5);
    height: 65px;
    left: 10px;
    opacity: 0;
    padding: 10px;
    position: absolute;
    width: calc(100% - 20px);
    z-index: -1;
}
.card-tile .text-content h4,
.card-tile .text-content p {
    color: #fff;
    margin: 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

/* All animations on hover */
.card-tile:hover {
    transform: scale(1.1);
}
.card-tile:hover .text-content {
    opacity: 1;
    z-index: 1;
}

@media(max-width: 600px) {
    .card-tiles-container {
        flex-direction: column;
    }
    .card-tile {
        margin: 0 0 10px 0;
        width: 100%;
    }
}

✌️

This content originally appeared on Ugly Duck and was authored by Bradley Taunt

Print Share Comment Cite Upload Translate Updates

APA

Bradley Taunt | Sciencx (2019-02-27T00:00:00+00:00) Animated card tiles. Retrieved from https://www.scien.cx/2019/02/27/animated-card-tiles/

MLA

" » Animated card tiles." Bradley Taunt | Sciencx - Wednesday February 27, 2019, https://www.scien.cx/2019/02/27/animated-card-tiles/

HARVARD

Bradley Taunt | Sciencx Wednesday February 27, 2019 » Animated card tiles., viewed ,<https://www.scien.cx/2019/02/27/animated-card-tiles/>

VANCOUVER

Bradley Taunt | Sciencx - » Animated card tiles. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/02/27/animated-card-tiles/

CHICAGO

" » Animated card tiles." Bradley Taunt | Sciencx - Accessed . https://www.scien.cx/2019/02/27/animated-card-tiles/

IEEE

" » Animated card tiles." Bradley Taunt | Sciencx [Online]. Available: https://www.scien.cx/2019/02/27/animated-card-tiles/. [Accessed: ]

rf:citation

» Animated card tiles | Bradley Taunt | Sciencx | https://www.scien.cx/2019/02/27/animated-card-tiles/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

What we will be building (live demo)

Card Title

Card Title

Card Title

The HTML

The CSS

Where are my cards?!

Don’t forget mobile

Customizing each card

Adding transitions

The final code

HTML

CSS

✌️

Related Posts