@alexruix
Card title
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Nam molestie pellentesque mi nec lacinia.
Button#card
#e8e8e81.4K views
CSSAdd prefixes
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: white; 12 padding: 16px; 13 border: 1px solid #232323; 14 transition: all .5s ease-in-out; 15} 16 17.card-hidden { 18 display: flex; 19 transform: translateY(200%); 20 flex-direction: column; 21 gap: .5rem; 22 transition: transform .5s ease-in, opacity .3s ease-in; 23 opacity: 0; 24} 25 26.card-border { 27 position: absolute; 28 width: 100%; 29 height: 100%; 30 left: 0; 31 top: 0; 32 border: 1px dashed #232323; 33 border-radius: 8px; 34 z-index: -1; 35} 36 37/*Hovers*/ 38.card:hover { 39 transform: translate(-15px, -15px); 40 border-color: #5bc0eb; 41} 42 43.card:hover .card-hidden { 44 transform: translateY(0); 45 opacity: 1; 46} 47 48.card:hover .title { 49 transform: translateY(200%); 50} 51 52/*Text*/ 53.title { 54 position: absolute; 55 bottom: 1rem; 56 transition: transform .25s ease-out; 57} 58 59/*Button*/ 60.button { 61 padding: 8px; 62 background-color: #5bc0eb; 63 cursor: pointer; 64} 65 66.button:hover { 67 background-color: #53aed4; 68} 69 70 71 72 73 74
HTML
1 <div class="container"> 2 <div class="card"> 3 <h2 class="title">Card title</h2> 4 <div class="card-hidden"> 5 <h3>Card title</h3> 6 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Nam molestie pellentesque mi nec lacinia.</p> 7 <a class="button">Button</a> 8 </div> 9 10 </div> 11 <div class="card-border"></div> 12 </div>