Box Corner Glow 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">
    <title>Box Glow Effect</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="box" style="--color:#0f0; --i:1" ></div>
        <div class="box" style="--color:#f0f; --i:2" ></div>
        <div class="box" style="--color:#0ff; --i:3" ></div>
        <div class="box" style="--color:#ff0; --i:4" ></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;
    background: #222;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.box{
    position: relative;
    width: 150px;
    height: 150px;
    background: #2d2d2d;
    overflow: hidden;
    cursor: pointer;
    transform: rotate(calc(var(--i) * 90deg));
}
.box::before{
    content: '';
    position: absolute;
    height: 300px;
    width: 300px;
    background: radial-gradient(var(--color), transparent,transparent);
    animation: anime 1.5s linear infinite;
}
@keyframes anime{
    0%{transform: translate(-150px, -150px);}
    25%{transform: translate(0px, -150px);}
    50%{transform: translate(0px, 0px);}
    75%{transform: translate(-150px, 0px);}
    100%{transform: translate(-150px, -150px);}
}
.box::after{
    content: '';
    position: absolute;
    inset: 2px;
    background: #2d2d2de0;
}

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