Card Hover Effect HTML & CSS Tutorial @rayen-code

Rayen
Card designs are a popular choice for showcasing content on websites. Adding a hover effect that reveals more details when a user interacts with a card can create a delightful user experience. In this tutorial, we'll guide you through the process of creating a card hover effect using HTML and CSS, allowing you to display additional details and engage your audience.

Step 1: HTML Structure:

Start by setting up the basic HTML structure for your cards. Each card consists of a container with relevant content.

HTML Code

<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Card UI Design</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="background">
            <!-- logo  -->
            <div class="logo">
                <i class="fa-solid fa-seedling"></i>
            </div>

            <!-- icons -->
            <div class="box box1">
                <div class="icon">
                    <i class="fa-brands fa-instagram"></i>
                </div>
            </div>

            <div class="box box2">
                <div class="icon">
                    <i class="fa-brands fa-twitter"></i>
                </div>
            </div>

            <div class="box box3">
                <div class="icon">
                    <i class="fa-brands fa-discord"></i>
                </div>
            </div>

            <div class="box box4">
                <div class="icon">
                    
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Step 2: CSS Styling:

Create a separate CSS file (style.css) to style the card and define the hover effect.

CSS Code

/*-------------------- CSS --------------------*/
*{
    margin: 0;padding: 0;box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.card{
    width: 200px;
    height: 200px;
    /* border: 1px solid red; */
    overflow: hidden;
    border-radius: 30px;
transition: 1s;

}

.background{
    position: relative;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 100% 110%, #fdeb82, #f78fad);
}

.logo{
    position: absolute;
    right: 50%;
    bottom: 50%;
    color: white;
    font-size: 1.5rem;
    transform: translate(50% , 50%);
    transition: 0.5s ease-in-out;
}
.box{
    position: absolute;
    padding: 10px;
    text-align: right;
    background: #ffffff63;
    border-top: 2px solid white;
    border-right: 1px solid white;
    border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
    box-shadow: #6464645d -7px 7px 29px 0;

    transition: 1s ease-in-out;
    overflow: hidden;

    cursor: pointer;
}
.box i{
    color: white;
}
.box::before{
    content: "";
    position: absolute;
    inset: 0;
    transition: 0.5s ease-in-out;
    opacity: 0;
}
.box1{
    width: 70%;
    height: 70%;
    bottom: -70%;
    left: -70%;
    transition-delay: 0s;
}
.box1::before{
    background: linear-gradient(60deg, #bc3d2f, #a16bfe);
}
.box2{
    width: 50%;
    height: 50%;
    bottom: -50%;
    left: -50%;
    transition-delay: .2s;
}
.box2::before{
    background: linear-gradient(60deg, #5583ee, #41d8dd);
}
.box3{
    width: 30%;
    height: 30%;
    bottom: -30%;
    left: -30%;
    transition-delay: .4s;
}
.box3::before{
    background: linear-gradient(60deg, #6de195, #c4e759);
}


.box4{
    width: 10%;
    height: 10%;
    bottom: -10%;
    left: -10%;
    transition-delay: .6s;
}

.box:hover .icon i{
    filter: drop-shadow(0 0 5px white);
}
.box:hover::before{
    opacity: 1;
}

/* HOVER  */
.card:hover{
    transform: scale(1.1);
}
.card:hover .box{
    bottom: -1px;
    left: -1px;
}
.card:hover .logo{
    bottom: 40px;
    right: 40px;
}

You can customize the card's dimensions, colors, fonts, and other properties to match your website's design. Additionally, consider adding transitions to the .details section for smoother animations.

Congratulations! You've successfully created a card hover effect using HTML and CSS. This interactive element can make your website's content more engaging and visually appealing. By following this tutorial, you've learned how to provide users with a seamless way to discover additional information about each card.

Feel free to implement this effect on your website to showcase various types of content, such as articles, products, or services. The skills you've acquired in this tutorial will help you create more immersive and interactive user interfaces that capture your audience's attention.

0 Comments