@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");*{margin:0;padding:0;box-sizing:border-box;font-family:'Rubik', sans-serif}body{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#555}.container{max-width:1050px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.card-circular-filling{margin:15px;position:relative;width:320px;height:420px;overflow:hidden;border-radius:10px}.card-circular-filling__img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}.card-circular-filling__img-box{position:absolute;left:0;top:0;width:100%;height:100%}.card-circular-filling__content{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:40px;color:#555;transition-duration:200ms;visibility:hidden;opacity:0;transform:translateY(50px)}.card-circular-filling:hover .card-circular-filling__content{visibility:visible;opacity:1;transform:translateY(0)}.card-circular-filling__circle-filling{position:absolute;display:block;width:0;height:0;border-radius:50%;opacity:0.95;background:#ffda65;background:radial-gradient(circle, #ffda65 0%, #fcfcfc 22%, #a7fbff 30%, rgba(122,254,255,0.7) 48%, rgba(8,115,255,0.4) 88%, rgba(0,140,255,0) 100%);z-index:1;transform:translate(-50%, -50%);transition:width 500ms, height 500ms}.card-circular-filling:hover .card-circular-filling__circle-filling{width:1100px;height:1100px}