1K views
1.cardBox { 2 width: 250px; 3 height: 300px; 4 position: relative; 5 display: grid; 6 place-items: center; 7 overflow: hidden; 8 border-radius: 20px; 9 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px, 10 rgba(0, 0, 0, 0.5) 0px 2px 25px 0px; 11} 12 13.card { 14 position: absolute; 15 width: 95%; 16 height: 95%; 17 background: #000814; 18 border-radius: 20px; 19 z-index: 5; 20 display: flex; 21 justify-content: center; 22 align-items: center; 23 flex-direction: column; 24 text-align: center; 25 color: #ffffff; 26 overflow: hidden; 27 padding: 20px; 28 cursor: pointer; 29 box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 60px -12px inset, 30 rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset; 31} 32 33.card .h4 { 34 position: absolute; 35 top: 50%; 36 left: 50%; 37 transform: translate(-50%, -50%); 38 font-size: 20px; 39 font-weight: 800; 40 pointer-events: none; 41 opacity: .5; 42} 43 44.card .content .h3 { 45 font-size: 18px; 46 font-weight: 800; 47 margin-bottom: 10px; 48} 49 50.card .content p { 51 font-size: 14px; 52 line-height: 1.4em; 53} 54 55.card .content { 56 transform: translateY(100%); 57 opacity: 0; 58 transition: 0.3s ease-in-out; 59} 60 61.card:hover .content { 62 transform: translateY(0); 63 opacity: 1; 64} 65 66.card:hover .h4 { 67 opacity: 0; 68} 69 70.cardBox::before { 71 content: ""; 72 position: absolute; 73 width: 40%; 74 height: 150%; 75 background: #40E0D0; 76 background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); 77 background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); 78 transform-origin: center; 79 animation: glowing_401 5s linear infinite; 80} 81 82@keyframes glowing_401 { 83 0% { 84 transform: rotate(0); 85 } 86 87 100% { 88 transform: rotate(360deg); 89 } 90} 91
MIT License