<div class="container">
        <div class="card">
            <div class="image">
                <img src="https://i.postimg.cc/dt5mQhQS/shoe.png" alt="shoes">
               </div>
               <div class="content">
                <h2>Nike Shoes</h2>
                <div class="size">
                    <h3>SIZE : </h3>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </div>
                <div class="color">
                    <h3>COLOR :</h3>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                        <a href="#"> <button id="press"> Buy Now </button></a>
            </div>
        </div>
    </div>
    
</body>
</html>
*{
    padding: 0px;
    margin: 0px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #131313;
}

.container{
    position: relative;
}
    .container .card{
        width: 320px;
        height: 450px;
        position: relative;
        /* transform: translate(-50%, -50%); */
        border-radius: 5px;
        overflow: hidden;
        background-color: rgb(58, 56, 56);
    }
    .container .card::before{
        content:'';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        clip-path: circle(150px at 80% 20%);
        background: #D05353;
        transition: 0.5s ease-in-out;
    }
    .container .card:hover:before{
        clip-path: circle(300px at 80% -20%);
    }
    .container .card::after{
        content: 'Nike';
        top: 40%;
        left: -10%;
        position: absolute;
        font-weight: 800;
        font-size: 12em;
        font-style: italic;
        color: rgba(255,255,255,0.04);

    }
    .container .card .image{
        position:absolute;
        top:50%;
        z-index: 10000;
        transform: translateY(-50%);
        width:100%;
        height: 250px;
        transition: 0.5s ease-in-out;
        
    }
    .container .card:hover .image{
        top: 0%;
        transform: translateY(0%);
        cursor: pointer;
    }
    .container .card .image img{
        position: absolute;
        top: 40%;
        left: 43%;
        transform: translate(-50%, -50%) rotate(-25deg);
        width: 250px;
    }
    .container .card .content{
        position: absolute;
        bottom: 0%;
        width: 310px;
        height: 100px;
        text-align: center;
        transition: 1s;
        z-index: 10;
    
    }
.container .card:hover .content{
    height: 210px;
}
.container .card .content h2{
    position: relative;
    font-weight: 600;
    letter-spacing:1px;
    color: #fff;

}
.container .card .content .size{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 2px;
    transition: 0.2s;
    opacity: 0;
    visibility: hidden;
}
.container .card:hover .content .size{
    opacity: 1;
    visibility: visible;
    
}
.container .card .content .color{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 2px;
    transition: 0.2s;
    opacity: 0;
    visibility: hidden;
}
 .container .card:hover .content .color{
    opacity: 1;
    visibility: visible;
}
.container .card .content .size h3, .container .card .content .color h3{
    font-weight: 300;
    font-size: 14px;
    margin-right: 10px;
    color: #fff;
    letter-spacing:2px;
    text-transform: uppercase;
}
.container .card .content .size span{
    width: 26px;
    height: 26px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    line-height: 26px;
    color: #111;
    background: #fff;
    margin: 0 5px;
    transition: 0.5s;
    /* border-radius: 5px; */
    cursor: pointer;
} 
.container .card .content .size span:hover
{
    background: rgb(228, 192, 125);
}
.container .card .content .color span {
    width:20px;
    height:20px;
    margin: 0 5px;
    border-radius: 50%;
}
.container .card .content .color span:nth-child(2){
    background-color:#07ac38 ;
}
.container .card .content .color span:nth-child(3){
    background-color:#FB8500 ;
}
.container .card .content .color span:nth-child(4){
    background-color: #990808;
}
.container .card .content .color span:nth-child(5){
    background-color:rgb(0, 208, 255);
}

.container .card .content a{
    display: inline-block;
    /* padding: 10px 20px; */
    font-weight: 600;
    background-color: #fff;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(50px);
    transition: 0.2s;
}
.container .card:hover .content a{
    transform: translateY(0%);
    opacity:1;
    
   
}
.container .card .content a #press{
    position: relative;
    font-size: 14px;

}



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.