{"html":"

\n \n

Name

Web Dev

","css":".card {\n width: 190px;\n height: 254px;\n position: relative;\n background: #f5f5f5;\n color: #252525;\n border-radius: 4px;\n overflow: hidden;\n line-height: 150%;\n box-shadow: 0px 10px 20px rgba(80, 80, 80, 0.2);\n transition: box-shadow .3s ease-in-out;\n}\n\n.card-info {\n position: absolute;\n bottom: 1em;\n width: 100%;\n text-align: center;\n}\n\n/* Image */\n.card-img {\n background: #00ff88;\n background: linear-gradient(to top, #00ff88, #61efff);\n height: 100%;\n width: 100%;\n position: absolute;\n transition: transform .3s ease-in-out;\n z-index: 2;\n}\n\n/* Buttons */\n.social-media {\n position: absolute;\n bottom: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n padding: 0 1rem;\n transform: translateY(-6em);\n z-index: 3;\n}\n\n.social-media li {\n background: #f5f5f5;\n display: inline-flex;\n padding: 10px;\n border-radius: 50%;\n cursor: pointer;\n opacity: 0;\n transition: all .3s ease-in;\n}\n/* Icons */\n.social-media li svg {\n --size: 24px;\n width: var(--size);\n height: var(--size);\n fill: #252525;\n}\n\n/* Texts */\n.title {\n font-size: 1.5em;\n font-weight: bold;\n}\n\n.subtitle {\n letter-spacing: 1px;\n font-size: 0.9em;\n}\n\n\n/* Hovers */\n.card:hover {\n box-shadow: 0px 15px 30px rgba(80, 80, 80, 0.3);\n}\n\n.card:hover .card-img {\n transform: translateY(-5em);\n}\n\n.card:hover .social-media li {\n transform: translateY(-5%);\n opacity: 1;\n}\n\n.card:hover .social-media li:nth-child(1) {\n transition-delay: 0s;\n}\n\n.card:hover .social-media li:nth-child(2) {\n transition-delay: .1s;\n}\n\n.card:hover .social-media li:nth-child(3) {\n transition-delay: .2s;\n}"}

bright-grasshopper-50

👁 实时预览

📝 源代码