Card Component hover effect using HTML and CSS

Hover effects can add a touch of interactivity and engagement to your website or application. In this article, we'll explore how to create a simple yet effective hover card component using HTML and CSS. This component will display content when users hover over it, making it a great way to showcase additional information or call-to-action items.

Must Read: Professional Loading animation using HTML, CSS and JavaScript

The provided HTML code defines a basic structure for our hover card component. 

<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.

Below is CSS code snippet for styling the card component.

.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;
}

With this simple HTML and CSS code, you can create an engaging hover card component. When users hover their mouse pointer over the "card" container, they will see the card change its appearance. You can easily customize this component to include more content or different styles to suit your website's design.

Experiment with different styles and content to create unique hover cards that capture your users' attention and encourage interaction.

Download