Card Resize Effects with HTML, CSS, and JavaScript @rayen-code

Rayen

Card resize effects can add a dynamic and interactive touch to your website. In this tutorial, we'll guide you through the process of designing captivating card resize effects using HTML, CSS, and JavaScript. Elevate your web design skills and make your content stand out with this engaging design element.




Step 1: HTML Markup:

Begin by setting up the HTML structure for your card resize 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>Image Re-size Animation</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <div class="container">
            <div class="image-div c-1 active"></div>
            <div class="image-div c-2 "></div>
            <div class="image-div c-3"></div>
            <div class="image-div c-4"></div>
            <div class="image-div c-5"></div>
        </div>
    </main>
    


    <script src="main.js"></script>
</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) 
/*-------------------- CSS --------------------*/
*{
    margin: 0;padding: 0;box-sizing: border-box;
}
body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center
    ;
}
.container{
    width: 700px;
    height: 400px;
    display: flex;
}
.image-div{
    width: 60px;
    min-width: 60px;
    height: 100%;
    border-radius: 20px;
    border: 2px solid white;
    box-shadow: 0 0 10px #1115;
    overflow: hidden;
    transition: linear 0.5s;
    cursor: pointer;
    background-position: center;
    background-size: cover;
}
.c-1{
    background-image: url(img/img\ \(1\).jpg);
}
.c-2{
    background-image: url(img/img\ \(2\).jpg);
}
.c-3{
    background-image: url(img/img\ \(3\).jpg);
}
.c-4{
    background-image: url(img/img\ \(4\).jpg);
}
.c-5{
    background-image: url(img/img\ \(5\).jpg);
}

.active{
    width: 100%;
}

Step 3: Adding JavaScript Interaction:

Use JavaScript to add interactive functionality to your card resize effect.
//-------------------- Java Script --------------------//
let imageDiv = document.querySelectorAll(".image-div");

imageDiv.forEach((elem)=>{
    elem.addEventListener("click", ()=>{
        imageDiv.forEach((rev)=>{
            rev.classList.remove("active")
        })


        elem.classList.add("active");
    })
})

Customize your card resize effect by adding your own content, colors, and styling. This dynamic design element is perfect for emphasizing featured content or interactive cards on your website.

0 Comments