{"html":"

Card Hover

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.\n

\n \n

\n","css":".card {\n position: relative;\n width: 350px;\n height: 250px;\n background-image: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n border-radius: 10px;\n display: flex;\n padding: 10px 30px;\n flex-direction: column;\n gap: 10px;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n}\n\n.heading {\n font-size: 24px;\n font-weight: 700;\n color: #ffffff;\n}\n\n.para {\n text-align: center;\n color: #ffffff;\n opacity: 0.7;\n line-height: 1.4;\n}\n\n.overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n background-color: rgba(0, 0, 0, 0.6);\n transition: opacity 0.3s ease;\n pointer-events: none;\n}\n\n.card:hover .overlay {\n opacity: 1;\n pointer-events: auto;\n}\n\n.card .card-btn {\n position: absolute;\n top: 50%;\n left: 50%;\n font-weight: 600;\n padding: 10px 20px;\n font-size: 16px;\n transform: translate(-50%, -50%);\n background-color: #ffffff;\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 999;\n border: none;\n opacity: 0;\n scale: 0;\n transform-origin: 0 0;\n box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.15);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card:hover .card-btn {\n opacity: 1;\n scale: 1;\n}\n\n.card .card-btn:hover {\n box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.3);\n}\n\n.card .card-btn:active {\n scale: 0.95;\n}\n\n.overlay::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n width: 100%;\n height: 100%;\n background-image: linear-gradient(-45deg, #f89b2980 0%, #ff0f7b80 100% );\n transition: transform 0.5s ease;\n}\n\n.card:hover .overlay::after {\n transform: translate(-50%, -50%) scale(2);\n}\n"}

perfect-ladybug-87

👁 实时预览

📝 源代码