@alexruix
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
#card
#e8e8e84.9K views
CSSAdd prefixes
1.card { 2 height: 254px; 3 width: 190px; 4 position: relative; 5 transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); 6 border-radius: 1em; 7 box-shadow: 0 0 20px 8px #d0d0d0; 8 ; 9} 10 11 /*Image*/ 12.card-image { 13 height: 100%; 14 width: 100%; 15 position: absolute; 16 transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1); 17 background: #0a3394; 18 background: linear-gradient(to top, #0a3394, #4286f4); 19} 20 21/*Description */ 22.card-description { 23 display: flex; 24 position: absolute; 25 gap: 1em; 26 flex-direction: column; 27 background-color: #f5f5f5; 28 height: 70%; 29 bottom: 0; 30 border-radius: 1em 1em 0 0; 31 transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1); 32 padding: 1rem; 33} 34 35/*Text*/ 36.text-title { 37 font-size: 1.4em; 38 font-weight: 700; 39} 40 41.text-body { 42 font-size: 1em; 43 line-height: 150%; 44} 45 46 47/* Hover states */ 48 49.card:hover .card-description { 50 transform: translateY(100%); 51} 52 53
HTML
1<div class="card"> 2<div class="card-image"></div> 3 <div class="card-description"> 4 <p class="text-title"> Card Title</p> 5 <p class="text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p> 6 </div> 7</div>