Stylish Card Design with Glow Effect: HTML, CSS Guide @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>Glow Card Effect</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrapper">
        <!-- card one  -->
        <div class="card">
            <div class="face front">
                <div class="content">
                    <i class="bi bi-facebook"></i>
                    <h3>Facebook</h3>
                </div>
                
            </div>
            <div class="face back">
                <div class="content">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At beatae aut praesentium qui distinctio fugit quae rem quisquam, odit voluptatibus sequi, facilis laborum necessitatibus eaque nihil, saepe unde vero harum excepturi eos culpa doloremque molestiae?</p>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>
          <!-- card two -->
          <div class="card">
            <div class="face front">
                <div class="content">
                    <i class="bi bi-messenger"></i>
                    <h3>Messenger</h3>
                </div>
                
            </div>
            <div class="face back">
                <div class="content">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At beatae aut praesentium qui distinctio fugit quae rem quisquam, odit voluptatibus sequi, facilis laborum necessitatibus eaque nihil, saepe unde vero harum excepturi eos culpa doloremque molestiae?</p>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>

          <!-- card three  -->
          <div class="card">
            <div class="face front">
                <div class="content">
                    <i class="bi bi-linkedin"></i>
                    <h3>Linkedin</h3>
                </div>
                
            </div>
            <div class="face back">
                <div class="content">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At beatae aut praesentium qui distinctio fugit quae rem quisquam, odit voluptatibus sequi, facilis laborum necessitatibus eaque nihil, saepe unde vero harum excepturi eos culpa doloremque molestiae?</p>
                    <a href="#">Read More</a>
                </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 --------------------*/
/* style.css */
*{
    box-sizing: border-box;
    text-decoration: none;
}

body{
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper{
    width: 1000px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.card{
    position: relative;
}

.card .face{
    width: 300px;
    height: 200px;
    transition: 0.4s;
}

.card .front{
    position: relative;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
}
.card:hover .front{
    transform: translateY(0px);

    box-shadow: 
        inset  0 0 60px whitesmoke,
        inset 20px 0 80px #f0f,
        inset -20px 0 80px #0ff,
        inset 20px 0 300px #f0f,
        inset -20px 0 300px #0ff,
                0 0 50px #fff,
                -10px 0 80px #f0f,
                10px 0 80px #0ff;
    
}

.front .content{
    opacity: 0.2;
    color: white;
    text-align: center;
    transition: 0.5s;
}

.card:hover .front .content{
    opacity: 1;
}

.card .front .content i{
    font-size: 3rem;
    display: inline-block;
}
.card .front .content h3{
    font-size: 1rem;
}

.back{
    position: relative;
    background: whitesmoke;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-shadow: 0 20px 50px #000000cc;
    transform: translateY(-100px);
}

.card:hover .back{
    transform: translateY(0px);
}

.back p, .back a{
font-size: 0.8rem;
margin: 0;
padding: 0;
color: #333;
}
.back a{
    color: black;
    outline: 1px dashed #333;
    padding: 10px;
    margin-top: 15px;
    display: inline-block;
}
.back a:hover{
    background: #333;
    color: white;
}

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