Igor Brown

Developer

","css":".container {\n position: relative;\n height: 300px;\n background: #6c23c0;\n padding: 2rem;\n border-radius: 8px;\n transition: all .25s ease-in-out;\n}\n\n.container:hover {\n box-shadow: 0 4px 50px #00000020;\n}\n\n.container:hover .card {\n transform: translateY(-5%);\n}\n\n.info {\n margin-top: 1rem;\n}\n\n.info h2, p {\n color: #fff;\n text-align: center;\n}\n\n.card {\n transition: all .25s ease-in-out;\n}\n\n.card input {\n display: none;\n}\n\n.card main {\n position: relative;\n}\n\n.card main a svg {\n width: 120px;\n height: 120px;\n border-radius: 50%;\n border: 4px solid rgb(108, 35, 192);\n}\n\n.card main a {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 8px;\n background-image: linear-gradient(to right, rgb(23, 122, 250) 20%, rgb(3, 240, 209));\n border-radius: 50%;\n overflow: hidden;\n}\n\n.card main a:hover::after {\n opacity: 1;\n}\n\n.card main a::after {\n content: \"Change\";\n position: absolute;\n width: 100%;\n height: 35%;\n left: 0px;\n bottom: 0px;\n background-image: linear-gradient(transparent 0%, rgba(108, 35, 192, 0.584) 100%);\n display: flex;\n justify-content: center;\n align-items: center;\n color: rgb(255, 255, 255);\n opacity: 0;\n transition: all 0.2s ease-in-out 0s;\n padding-bottom: 1rem;\n}\n\n.card span {\n position: absolute;\n bottom: 5px;\n right: 5px;\n background: rgb(119, 255, 170);\n width: 35px;\n height: 35px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 4px solid rgb(108, 35, 192);\n color: rgb(108, 35, 192);\n}"}

silly-fireant-70

👁 实时预览

📝 源代码