{"html":"

\n \n

\n Lorem
Ipsum dolor.\n

$199

\n \n

","css":".card {\n position: relative;\n background: transparent;\n width: 300px;\n height: 300px;\n border: none;\n}\n\n.card:hover {\n width: 300px;\n}\n\n.card .container-image {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: #e7e7e7;\n width: 190px;\n height: 190px;\n cursor: pointer;\n border: none;\n border-radius: 50%;\n box-shadow: 0 0 3px 1px #1818183d, 2px 2px 3px #18181865, inset 2px 2px 2px #ffffff;\n transition: all .3s ease-in-out, opacity .3s;\n transition-delay: .6s, 0s;\n}\n\n.card:hover .container-image {\n opacity: 0;\n border-radius: 8px;\n transition-delay: 0s, .6s;\n}\n\n.card .container-image .image-circle {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 125px;\n height: auto;\n object-fit: contain;\n filter: drop-shadow(2px 2px 2px #1818188a);\n transition: all .3s ease-in-out;\n transition-delay: .4s;\n}\n\n.card:hover .container-image .image-circle {\n opacity: 0;\n transition-delay: 0s;\n}\n\n.card .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: #e7e7e7;\n padding: 20px;\n width: 190px;\n height: 190px;\n cursor: pointer;\n border: none;\n border-radius: 8px;\n box-shadow: 0 0 3px 1px #1818183d, 2px 2px 3px #18181865, inset 2px 2px 2px #ffffff;\n visibility: hidden;\n transition: .3s ease-in-out;\n transition-delay: 0s;\n z-index: 1;\n}\n\n.card:hover .content {\n width: 290px;\n height: 190px;\n visibility: visible;\n transition-delay: .5s;\n}\n\n.card .content .detail {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: all .3s ease-in-out;\n transition-delay: 0s;\n}\n\n.card:hover .content .detail {\n color: #181818;\n opacity: 100%;\n transition: 1s;\n transition-delay: .3s;\n}\n\n.card .content .detail span {\n margin-bottom: 5px;\n font-size: 18px;\n font-weight: 800;\n}\n\n.card .content .detail button {\n background: #b8854b;\n margin-top: auto;\n width: 75px;\n height: 25px;\n color: #ffffff;\n font-size: 13px;\n border: none;\n border-radius: 8px;\n transition: .3s ease-in-out;\n}\n\n.card .content .detail button:hover {\n background: #d39f63;\n}\n\n.card .content .product-image {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.card .content .product-image .box-image {\n display: flex;\n position: absolute;\n top: 0;\n left: -25%;\n width: 100%;\n height: 115%;\n opacity: 0;\n transform: scale(.5);\n transition: all .5s ease-in-out;\n transition-delay: 0s;\n}\n\n.card:hover .content .product-image .box-image {\n top: -25%;\n left: 0;\n opacity: 100%;\n transform: scale(1);\n transition-delay: .3s;\n}\n\n.card .content .product-image .box-image .img-product {\n margin: auto;\n width: 7rem;\n height: auto;\n}\n\n.fil-shoes1, .fil-shoes2 {\n fill: #333333\n}"}

friendly-dragonfly-11

👁 实时预览

📝 源代码