{"html":"

\n Hover Here!\n\n \n

\n \n \n\n \n

\n Jackson Williams\n Frontend Developer \n

\n \n \n \n \n

\n","css":"/* Card Styles */\n.card {\n width: 300px;\n height: 400px;\n padding: 15px;\n border-radius: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n background-color: rgba(113, 113, 113, 0.6);\n backdrop-filter: blur(20px);\n text-align: center;\n border: 1px solid #fff;\n /* Transform Propertys */\n --rotate-animation: rotate(45deg);\n --scale-animation: scale(0);\n /* Backgrounds - Social Media Hover */\n --bg-facebook: blue;\n --bg-instagram: linear-gradient(to right, #8a2387, #e94057, #f27121);\n --bg-twitter: rgb(25, 173, 206);\n --bg-linkedin: rgb(30, 48, 131);\n}\n\n.card::before {\n content: '';\n height: 110%;\n width: 110%;\n position: absolute;\n top: -5%;\n left: -5%;\n z-index: -1;\n background: linear-gradient(\n to right,\n #0f0c29,\n #302b63,\n #24243e\n );\n filter: blur(30px);\n}\n\n.card__hover {\n color: #fff;\n width: 100%;\n margin: 0;\n font-size: 40px;\n font-weight: 600;\n position: absolute;\n top: 50%;\n left: 0;\n text-align: center;\n letter-spacing: 2px;\n pointer-events: none;\n transform: scale(1) translateY(-50%);\n font-family: var(--font-mulish);\n transition: transform 500ms;\n}\n\n.card:hover .card__hover {\n transform: scale(0);\n}\n\n.card__figure {\n width: 100%;\n height: 65%;\n border-radius: 10px;\n overflow: hidden;\n transform: var(--rotate-animation) var(--scale-animation);\n transition: transform 600ms ease 100ms;\n}\n\n.card:hover .card__figure {\n --rotate-animation: rotate(0);\n --scale-animation: scale(1);\n}\n\n.card__figure svg {\n height: 100%;\n width: 100%;\n object-fit: cover;\n filter: drop-shadow(0 0 2px #0f0c29);\n}\n\n.card__info {\n display: flex;\n flex-direction: column;\n transform: var(--scale-animation);\n transition: transform 600ms ease 100ms;\n}\n\n.card:hover .card__info {\n --scale-animation: scale(1);\n}\n\n.card__name {\n color: #fff;\n font-size: 28px;\n letter-spacing: 1px;\n font-family: var(--font-AR-One-Sans);\n}\n\n.card__ocupation {\n color: aliceblue;\n font-family: var(--font-mulish);\n text-transform: uppercase;\n font-size: 18px;\n letter-spacing: 2px;\n}\n\n.card__links {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n margin-top: 1rem;\n --transform-animation: translateY(-10px);\n}\n\n.card__links svg {\n height: 55px;\n width: 55px;\n padding: 10px;\n background-color: rgba(128, 128, 128, 0.211);\n border-radius: 15px;\n cursor: pointer;\n transition: background .3s ease,\n transform .2s ease;\n}\n\n.card__links svg:hover {\n transform: var(--transform-animation);\n box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);\n}\n\n/* Hover Colors */\n.card__links svg:nth-child(1):hover {\n background: var(--bg-facebook);\n}\n\n.card__links svg:nth-child(2):hover {\n background: var(--bg-instagram);\n}\n\n.card__links svg:nth-child(3):hover {\n background: var(--bg-twitter);\n}\n\n.card__links svg:nth-child(4):hover {\n background: var(--bg-linkedin);\n}\n\n"}

dangerous-shrimp-68

👁 实时预览

📝 源代码