Create a Modern Card with hover effect using HTML CSS

Looking to add a bit of interactivity and flair to your web design? In this tutorial, we’ll show you how to create a stylish hover card with a text reveal animation using only HTML and CSS — no JavaScript needed.

This kind of card is perfect for modern websites that aim to provide minimalistic but engaging UI interactions. Whether you’re building a profile section, feature box or social follow prompt, this hover card adds elegance and attention-grabbing animation.

Let’s walk through the step-by-step process to build a CSS card with smooth hover effects and text reveal animation from scratch.

HTML Structure

The structure is minimal. One container holds the card and the card itself uses ::before and ::after pseudo-elements to handle the hover effects.

<div class="main-container">
    <div class="card">Hover</div>
</div>

The main container that holds this card component. You can place this container anywhere on your web page. Inside the main container, we have a div element with the class “card”. The text “HOVER” is placed within this element. Initially, this text will be visible, but we will use CSS to hide it until the user hovers over the card.

CSS Styling the Card

.main-container {
    display: flex;
    min-width: 250px;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

.card {
    width: 220px;
    height: 300px;
    display: grid;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border-radius: 1rem;
    place-items: center;
    letter-spacing: 0.2rem;
    background: linear-gradient(320deg, rgb(255 133 133) 30%, #8e7ef6 88%);
}

.card::before,
.card::after {
    content: '';
    width: 20%;
    height: 20%;
    opacity: .3;
    display: grid;
    place-items: center;
    font-size: .5rem;
    position: absolute;
    transition: .5s, font-size 1s ease-in-out .2s;
    background: linear-gradient(320deg, rgb(255 201 201) 30%, #b9aff5 88%);
}

.card::before {
    left: 0;
    top: 0;
    border-radius: 1rem 0 100% 0;
}

.card::after {
    right: 0;
    bottom: 0;
    border-radius: 100% 0 1rem 0;
}

.card:hover::before,
.card:hover::after {
    opacity: 1;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    border-radius: 1rem;
}

.card:hover::after {
    content: 'Follow';
    color: black;
}

• The card is given a gradient background, rounded corners and centered text.
• place-items: center ensures the text sits right in the middle.
• The card will animate on hover using the ::before and ::after pseudo-elements.

And that’s it — you’ve now learned how to create a hover card with text reveal using only HTML and CSS. This component is a great example of how small touches of animation and interactivity can elevate your UI without relying on JavaScript or plugins.

With creative use of ::before and ::after pseudo-elements, transitions and gradients, this CSS hover card effect not only looks modern but performs smoothly across all modern browsers.

Don’t hesitate to play around with the styles, content and layout to fit your own project. You can use it as part of a larger UI kit or even turn it into a reusable web component.

Keep experimenting, keep creating and happy coding!

Live Preview