Parallax Card Effect On Hover HTML CSS & JavaScript Tutorial @rayen-code

Rayen

Parallax effects add depth and interactivity to web design. In this tutorial, we'll teach you how to design an attention-grabbing parallax card effect using HTML, CSS, and JavaScript. Elevate your web design skills and make your website more engaging with this dynamic design element.




Step 1: HTML Markup:

Set up the HTML structure for your parallax card effect, defining the card and its content.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card 3D Parallax Effect on Hover</title>

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

<body>
    <div class="container">

        <!-- card one -->
        <div class="card">
            <div class="img">
                <img src="https://source.unsplash.com/300x300/?face" alt="">
            </div>
            <div class="desc">
                <h2>Your Name</h2>
                <p>Web Designer</p>
                <a href="#">Follow Me</a>
            </div>
        </div>

        <!-- card two -->
        <div class="card">
            <div class="img">
                <img src="https://source.unsplash.com/300x300/?face,face" alt="">
            </div>
            <div class="desc">
                <h2>Your Name</h2>
                <p>Web Designer</p>
                <a href="#">Follow Me</a>
            </div>
        </div>

        <!-- card three -->
        <div class="card">
            <div class="img">
                <img src="https://source.unsplash.com/300x300/?face,female" alt="">
            </div>
            <div class="desc">
                <h2>Your Name</h2>
                <p>Web Designer</p>
                <a href="#">Follow Me</a>
            </div>
        </div>




    </div>


    <script type="text/javascript" src="https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.js"></script>
    <script>
        VanillaTilt.init(document.querySelectorAll(".card"), {
            max: 25,
            speed: 400,
            glare: true,
            "max-glare": 1,
        });
    </script>
</body>

</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) 
/*-------------------- CSS --------------------*/
*{
    margin: 0;padding: 0;box-sizing: border-box;
    font-family: sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #222;
}

.container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    flex-wrap: wrap;
}
.container .card{
    position: relative;
    width: 300px;
    height: 300px;
    margin: 30px;
    border-radius: 0 15px 0 15px;
    background: #ffffff1a;
    backdrop-filter: blur(5px);
    transition: height 0.5s;
}
.container .card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#f00, #f0f);
    clip-path: circle(30% at right 70%);
}
.container .card::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#2196f3, #e91e63);
    clip-path: circle(20% at 10% 10%);
}

.img{
    position: relative;
    width: 200px;
    height: 200px;
    background: white;
    margin: auto;
    border-radius: 8px;
    overflow: hidden;
    transition: 0.4s;
    top: 20px;
    z-index: 1;
    box-shadow: 0 0 10px #0000004b;
}
.container .card:hover .img{
    top: -50px;
    scale: 0.9;
}
.img img{
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container .card .desc{
    position: absolute;
    bottom: 10px;
    text-align: center;
    padding: 0 20px;
    height: 30px;
    width: 100%;
    overflow: hidden;
    transition: 0.5s;
}
.container .card:hover .desc{
    height: 130px;
}
.container .card .desc  h2{
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}
.container .card .desc p{
    color: ghostwhite;
}
.container .card .desc a{
    position: relative;
    background: #fff;
    color: #000;
    text-decoration: none;
    border-radius: 3px;
    font-size: 1.2rem;
    padding: 10px;
    top: 30px;
    transition: 0.5s;
}
.container .card .desc a:hover{
    opacity: 0.8;
}

Customize your parallax card effect by adding your own text, graphics, and animations. This dynamic design element is perfect for grabbing users' attention.

0 Comments