{"html":"

\n \n

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

\n Read More\n

\n","css":".card {\n position: relative;\n width: 300px;\n height: 400px;\n margin: 20px;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.card__image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: 10px;\n}\n\n.card__image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.card__content {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 20px;\n background-color: #fff;\n transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.card__title {\n font-size: 24px;\n font-weight: bold;\n margin-bottom: 10px;\n}\n\n.card__text {\n font-size: 16px;\n line-height: 1.5;\n margin-bottom: 20px;\n}\n\n.card__button {\n display: inline-block;\n padding: 10px 20px;\n background-color: #000;\n color: #fff;\n text-decoration: none;\n border-radius: 5px;\n}\n\n.card:hover {\n transform: translateY(-10px);\n}\n\n.card:hover .card__image img {\n transform: scale(1.2);\n}\n\n.card:hover .card__content {\n transform: translateY(-100%);\n}\n\n.card__image {\n height: 400px;\n width: 300px;\n background-color: #000;\n /* you can put img url here */\n}"}

young-zebra-44

👁 实时预览

📝 源代码