Expanding Cards

Expanding Cards

html

<section>
    <div class="active"><img src="images/0005.jpg" alt=""></div>
    <div><img src="images/0013.jpg" alt=""></div>
    <div><img src="images/0014.jpg" alt=""></div>
    <div><img src="images/0015.jpg" alt=""></div>
    <div><img src="images/0016.jpg" alt=""></div>
</section>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width:100%;
    height: 100vh; 
    display: grid;
    place-items: center;
}

section {
    height: 600px;
    width: 90vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* gap: 20px; */
}
div {
    overflow: hidden;
    height: 100%;
    width: 6%;
    border-radius: 20px;
    transition: 0.7s ease-in-out;
    transform: scale(0.8);
}
.active {
    width: calc(100% - 24%);
    border-radius: 50px;
    transition: 0.7s ease-in-out;
    transform: scale(1);
}
img {
    width: 100%;
    height: 100%;
}

javascript

let div = document.querySelectorAll("div");

        div.forEach(item => {
            item.addEventListener("click", ()=> {
                removeActiveClass();
                item.classList.add("active");
        });
    })

    function removeActiveClass() {
        div.forEach(item => {
            item.classList.remove("active");
        })
    }