Card by ProgramaConPid
#212121
1/* Card Styles */ 2.card { 3 width: 300px; 4 height: 400px; 5 padding: 15px; 6 border-radius: 10px; 7 display: flex; 8 flex-direction: column; 9 align-items: center; 10 position: relative; 11 background-color: rgba(113, 113, 113, 0.6); 12 backdrop-filter: blur(20px); 13 text-align: center; 14 border: 1px solid #fff; 15 /* Transform Propertys */ 16 --rotate-animation: rotate(45deg); 17 --scale-animation: scale(0); 18 /* Backgrounds - Social Media Hover */ 19 --bg-facebook: blue; 20 --bg-instagram: linear-gradient(to right, #8a2387, #e94057, #f27121); 21 --bg-twitter: rgb(25, 173, 206); 22 --bg-linkedin: rgb(30, 48, 131); 23} 24 25.card::before { 26 content: ''; 27 height: 110%; 28 width: 110%; 29 position: absolute; 30 top: -5%; 31 left: -5%; 32 z-index: -1; 33 background: linear-gradient( 34 to right, 35 #0f0c29, 36 #302b63, 37 #24243e 38 ); 39 filter: blur(30px); 40} 41 42.card__hover { 43 color: #fff; 44 width: 100%; 45 margin: 0; 46 font-size: 40px; 47 font-weight: 600; 48 position: absolute; 49 top: 50%; 50 left: 0; 51 text-align: center; 52 letter-spacing: 2px; 53 pointer-events: none; 54 transform: scale(1) translateY(-50%); 55 font-family: var(--font-mulish); 56 transition: transform 500ms; 57} 58 59.card:hover .card__hover { 60 transform: scale(0); 61} 62 63.card__figure { 64 width: 100%; 65 height: 65%; 66 border-radius: 10px; 67 overflow: hidden; 68 transform: var(--rotate-animation) var(--scale-animation); 69 transition: transform 600ms ease 100ms; 70} 71 72.card:hover .card__figure { 73 --rotate-animation: rotate(0); 74 --scale-animation: scale(1); 75} 76 77.card__figure svg { 78 height: 100%; 79 width: 100%; 80 object-fit: cover; 81 filter: drop-shadow(0 0 2px #0f0c29); 82} 83 84.card__info { 85 display: flex; 86 flex-direction: column; 87 transform: var(--scale-animation); 88 transition: transform 600ms ease 100ms; 89} 90 91.card:hover .card__info { 92 --scale-animation: scale(1); 93} 94 95.card__name { 96 color: #fff; 97 font-size: 28px; 98 letter-spacing: 1px; 99 font-family: var(--font-AR-One-Sans); 100} 101 102.card__ocupation { 103 color: aliceblue; 104 font-family: var(--font-mulish); 105 text-transform: uppercase; 106 font-size: 18px; 107 letter-spacing: 2px; 108} 109 110.card__links { 111 width: 100%; 112 display: flex; 113 align-items: center; 114 justify-content: center; 115 gap: 1rem; 116 margin-top: 1rem; 117 --transform-animation: translateY(-10px); 118} 119 120.card__links svg { 121 height: 55px; 122 width: 55px; 123 padding: 10px; 124 background-color: rgba(128, 128, 128, 0.211); 125 border-radius: 15px; 126 cursor: pointer; 127 transition: background .3s ease, 128 transform .2s ease; 129} 130 131.card__links svg:hover { 132 transform: var(--transform-animation); 133 box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5); 134} 135 136/* Hover Colors */ 137.card__links svg:nth-child(1):hover { 138 background: var(--bg-facebook); 139} 140 141.card__links svg:nth-child(2):hover { 142 background: var(--bg-instagram); 143} 144 145.card__links svg:nth-child(3):hover { 146 background: var(--bg-twitter); 147} 148 149.card__links svg:nth-child(4):hover { 150 background: var(--bg-linkedin); 151} 152 153
937 views
937 views
MIT License