Welcome to Lite UI. Test Link
Home
CSS
HTML

Glowing Card using HTML, CSS, & JS Hover Effect

5 minute read

 Hello! Welcome to Coder AaryaN. 

You are looking for Today i Creating Card using Html , Css , Js with Hover effect then this post is just for you.

Information

In the vast landscape of web design, creating visually appealing elements is crucial. A glowing card can capture users' attention and enhance the overall user experience. Let's dive into the process of crafting such a card using a combination of HTML, CSS, and JavaScript.

HTML Basics

Before we embark on the journey of styling and scripting, let's lay the foundation with clean and semantic HTML. Properly structured HTML is essential for creating a solid base for our glowing card.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

   

<div class="box">

    <div class="imgBx">

        <img src="https://i.pinimg.com/originals/93/0d/02/930d0232a969c5b7a6513e0b03a80d2d.jpg" alt="">

    </div>

    <div class="content">

        <h2>John Doe<br><span>Creative Designer</span></h2>

    </div>

</div>

<div class="box">

    <div class="imgBx">

        <img src="https://i.pinimg.com/originals/93/0d/02/930d0232a969c5b7a6513e0b03a80d2d.jpg" alt="">

    </div>

    <div class="content">

        <h2>John Doe<br><span>Creative Designer</span></h2>

    </div>

</div>

<div class="box">

    <div class="imgBx">

        <img src="https://i.pinimg.com/originals/93/0d/02/930d0232a969c5b7a6513e0b03a80d2d.jpg" alt="">

    </div>

    <div class="content">

        <h2>John Doe<br><span>Creative Designer</span></h2>

    </div>

</div>

   

</body>

</html>

CSS Styling

CSS comes into play when it's time to style our card. We'll explore the CSS properties needed to achieve the desired layout, ensuring the visual appeal aligns with our creative vision.

CSS Hover Effect

The highlight of our glowing card is the CSS hover effect. We'll delve into the code, breaking down each component to understand how the glow effect is achieved when users interact with the card.

<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #282539;
}
.box{
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px;
    background: #060c21;
    transition: .5s;
}
.box:hover{
    height: 400px;
}
.box .imgBx{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.box .imgBx img{
    width: 300px;
    opacity: 0.1;
    transition: 0.5s;
}
.box:hover .imgBx img{opacity: 1;}
.box:before{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #ffffff;
    z-index: -1;
}
.box:after{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #ffffff;
    z-index: -2;
    filter: blur(40px);
}
.box:before,
.box:after{
    background: linear-gradient(225deg, #89ff00,#010615,#00bcd4);
}
.box:nth-child(2):before,
.box:nth-child(2):after{
    background: linear-gradient(225deg, #ff005e,#010615,#fbff00);
}
.box:nth-child(3):before,
.box:nth-child(3):after{
    background: linear-gradient(225deg, #dd6300,#010615,#2196f3);
}
.box .content{
    position: absolute;
    bottom: 10px;
    top: 300px;
    left: 10px;
    right: 10px;
    height: 90px;
    background: rgba(0,0,0,.1);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: .2s;
}
.box:hover .content{
    opacity: 1;
}
.box .content h2{
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 1px;
}
.box .content h2 span{
    font-size: 14px;
    color: #fff;
    font-weight: 200;
    letter-spacing: 2px;
}

</style>

Absolutely! The techniques shared are versatile and can be applied to various websites.

We recommend utilizing online platforms like GitHub, CodePen, or personal blogs to showcase and share your creations.

Post a Comment