#e8e8e8
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: 16px; 7 box-shadow: 0 0 20px 8px #d0d0d0; 8 overflow: hidden; 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: .5em; 26 flex-direction: column; 27 background-color: #f5f5f5; 28 color: #212121; 29 height: 70%; 30 bottom: 0; 31 border-radius: 16px; 32 transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1); 33 padding: 1rem; 34} 35 36/*Text*/ 37.text-title { 38 font-size: 1.3rem; 39 font-weight: 700; 40} 41 42.text-body { 43 font-size: 1rem; 44 line-height: 130%; 45} 46 47 48/* Hover states */ 49.card:hover .card-description { 50 transform: translateY(100%); 51} 52 53
Comments
MIT License