.card{position:relative;width:250px;height:350px;background:#ecf6fd;border-radius:20px;overflow:hidden;cursor:pointer;box-shadow:-2px 3px 4px 2px #ccc}.card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#50aee0;clip-path:circle(150px at -40% 20%);transition:.5s ease-in-out}.card:hover:before{clip-path:circle(300px at -28% -20%)}.card:after{content:"";position:absolute;top:30%;left:5%;opacity:.1;font-size:12em;font-weight:800;font-style:italic;color:#6dacdb}.card .product-img{position:absolute;top:45%;transform:translateY(-50%) translateX(25px);z-index:10000;width:calc(100% - 50px);height:250px;transition:.5s}.card:hover .product-img{top:10%;transform:translateY(0) translateX(25px)}.card:hover .text-box{top:50%;transform:translateY(25%);transition:all .5s ease}.card .product-img img{position:absolute;top:50%;left:50%;border-radius:10px;transform:translate(-50%,-50%) rotate(0);width:270px}.card:hover .product-img img{transform:scale(1.1) translate(-46%,-50%) rotate(0);transition:.5s}.card .text-box{transform:translateY(10%);top:80%;transition:.5s}@media (max-width:740px){.card{width:370px;height:400px}}@media (min-width:740px){.card{width:350px;height:400px}}@media (min-width:1024px){.card{width:260px;height:400px}}