{"html":"

\n \n

Card title

Lorem Ipsum dolor sit amet

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 1em;\n padding: 1.9rem;\n background: #f5f5f5;\n position: relative;\n display: flex;\n align-items: flex-end;\n transition: 0.4s ease-out;\n box-shadow: 0px 7px 20px rgba(43, 8, 37, 0.2);\n}\n\n.card:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 100%;\n background: rgba(238, 116, 116, 0.4);\n z-index: 2;\n transition: 0.5s;\n}\n\n.card-info {\n position: relative;\n z-index: 3;\n color: #f5f5f5;\n opacity: 0;\n transform: translateY(20%);\n transition: 0.5s;\n}\n\n/*Text*/\n.text-title {\n font-size: 1.5rem;\n font-weight: 500;\n}\n\n.text-body {\n letter-spacing: 1px;\n font-size: 0.9rem;\n margin: 5px 0 15px 0;\n}\n\n/*Button*/\n.card-button {\n padding: 0.6rem;\n outline: none;\n border: none;\n border-radius: 4px;\n background: #ee9ca7;\n color: white;\n font-weight: bold;\n transition: 0.4s ease;\n}\n\n/*Image*/\n.card-img {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background: #ee9ca7;\n background: linear-gradient(to bottom, #e7aeae, #ee9ca7);\n}\n\n/*Hover*/\n.card:hover {\n transform: translateY(5%);\n}\n\n.card:hover:before {\n opacity: 1;\n}\n\n.card:hover .card-info {\n opacity: 1;\n transform: translateY(0);\n}\n\n.card-button:hover {\n background: rgba(218, 77, 77, 0.4);\n color: #f5f5f5;\n}"}

gentle-crab-18

👁 实时预览

📝 源代码