2.3K views
1.container { 2 position: relative; 3 width: 190px; 4 height: 254px; 5} 6 7.card { 8 position: relative; 9 width: 190px; 10 height: 254px; 11 background: #f5f5f5; 12 border-radius: 8px; 13 color: #232323; 14 padding: 16px; 15 border: 1px solid #232323; 16 transition: all .5s ease-in-out; 17 overflow: hidden; 18} 19 20.card-hidden { 21 display: flex; 22 transform: translateY(200%); 23 flex-direction: column; 24 gap: .5rem; 25 transition: transform .5s ease-in, opacity .3s ease-in; 26 opacity: 0; 27} 28 29.card-border { 30 position: absolute; 31 width: 100%; 32 height: 100%; 33 left: 0; 34 top: 0; 35 border: 1px dashed #232323; 36 border-radius: 8px; 37 z-index: -1; 38} 39 40/*Hovers*/ 41.card:hover { 42 transform: translate(-15px, -15px); 43 border-color: #5bc0eb; 44} 45 46.card:hover .card-hidden { 47 transform: translateY(0); 48 opacity: 1; 49} 50 51.card:hover .title { 52 transform: translateY(200%); 53} 54 55/*Text*/ 56.title { 57 position: absolute; 58 bottom: 1rem; 59 font-weight: 700; 60 font-size: 1.5rem; 61 transition: transform .25s ease-out; 62} 63 64.title-in { 65 font-weight: 700; 66 font-size: 1.25rem; 67} 68 69/*Button*/ 70.button { 71 display: inline-flex; 72 justify-content: center; 73 padding: 8px; 74 border-radius: 24px; 75 font-weight: 600; 76 background-color: #5bc0eb; 77 cursor: pointer; 78 transition: background-color .3s ease-in-out; 79} 80 81.button:hover { 82 background-color: #53aed4; 83} 84 85 86 87 88 89
MIT License