Demo

I suggest you to view the demo in fullscreen view. click on the top right most button to access fullscreen view.

Video tutorial

If you find out article hard to understand. You can watch a video tutorial on youtube.

If you like the tutorial video. Please subscribe my youtube channel. It will really help me.

Let's code.

First we need to create 3 file index.html, style.css, and app.js. After that in HTML file write the basic structure and link all external files.

Now let's start.

In index.html create a div with class .card and inside of that create a div with class .background-overlay and inside of that create a span with class .circle. What we will do is we give .background-overlay element absolute position and make its overflow hidden that's how we can create the half circle without affecting card's overflow property.Now inside .card and outside background-overlay create another div with class .content and inside of that make an h1, p and another h1 and more divs.
The structure at last should look like this.

<div class="card">
    <div class="background-overlay">
        <span class="circle"></span>
    </div>
    <div class="content">
        <h1 class="product-name">nike fly</h1>
        <img src="shoe.png" class="product-img" alt="">
        <h1 class="price">$ 199</h1>
        <div class="sizes">
            <p class="size">5</p>
            <p class="size">6</p>
            <p class="size active">7</p>
            <p class="size">8</p>
        </div>
        <div class="btn-container">
            <button class="btn buy">buy now</button>
            <button class="btn cart">add to cart</button>
        </div>
    </div>
</div>

after that give some styles.

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

body{
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #c72734;
    font-family: 'roboto', sans-serif;
}

.card{
    width: 300px;
    height: 450px;
    background: #ea2b3b;
    border-radius: 20px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
    position: relative;
    padding: 40px 20px;
}

.background-overlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    border-radius: 20px;
}

.circle{
    position: absolute;
    top: -170px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: #fff;
}

.content{
    position: relative;
}

.product-name{
    text-transform: uppercase;
    text-align: center;
    color: #000;
    font-weight: 400;
    font-size: 40px;
}

.product-img{
    width: 270px;
    display: flex;
    margin: auto;
    margin-top: 100px;
    transform: rotate(-40deg);
    transition: 1s;
}

.card.active .product-img{
    margin-top: 40px;
    transform: rotate(-20deg);
}

.price{
    opacity: 0;
    transform: translateY(40px);
    color: #fff;
    font-size: 60px;
    font-weight: 400;
    margin-top: 20px;
    transition: 1s;
}

.sizes{
    opacity: 0;
    transform: translateY(40px);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 1s;
}

.size{
    color: #000;
    background: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 20px;
    margin-top: 20px;
    font-weight: 400;
    transition: 1s;
    cursor: pointer;
}

.size.active,
.size:hover{
    background: #000;
    color: #fff;
}

.card.active .price,
.card.active .sizes{
    opacity: 1;
    transform: translateY(0);
}

.card.active .btn-container{
    opacity: 1;
    transform: translateY(0);
    transition: 1s;
    transition-delay: 1s;
}

.btn-container{
    opacity: 0;
    transform: translateY(40px);
    display: block;
    position: absolute;
    width: calc(100% + 40px);
    height: 40px;
    bottom: -80px;
    left: -20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn{
    width: 48%;
    height: 100%;
    border-radius: 10px;
    border: none;
    outline: none;
    text-transform: capitalize;
    font-size: 16px;
}

.btn.buy{
    background-color: #ea2b3b;
    color: #fff;
}

Our card is done. Now we have to create a overlay div which we can use to toggle .active class of our card.
So in index.html before our .card element create a div with class .overlay.

<div class="overlay"></div>

and give this style

.overlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
}

Now add JS to toggle classes.

const card = document.querySelector('.card');
const overlay = document.querySelector('.overlay');

card.addEventListener('click', () => {
    card.classList.add('active');
    overlay.style.display = 'block';
})

overlay.addEventListener('click', () => {
    card.classList.remove('active');
    overlay.style.display = null;
})

Done.If you find this helpful please follow me on devto and also subscribe my youtube channel.

If you are interested in programming and want to know how I am a 15yr old teen make these designs. You can follow me on my instagram. I am planning to post my game development experiments on instagram soon.

Source Code, Download Image Only, My youtube channel, Instagram

If you find any mistake I made or you if you have any doubt feel free to ask me in comment.

Thanks for visiting.

Blog

You have never seen this product card before

Modern Web

Demo

Video tutorial

Let's code.

Now let's start.

Join Our Newsletter. No Spam, Only the good stuff.

Related