#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 position: relative; 5 border-radius: 16px; 6 background: #f5f5f5; 7 transition: box-shadow .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 8 overflow: hidden; 9 cursor: pointer; 10} 11 12.card-img { 13 position: absolute; 14 height: 100%; 15 width: 100%; 16 background-color: #6eee87; 17} 18 19.card-info { 20 position: absolute; 21 width: 100%; 22 bottom: 0; 23 padding: 1rem; 24 display: flex; 25 align-items: flex-end; 26 justify-content: space-between; 27} 28 29.card-icon { 30 opacity: 0; 31 transform: translateX(-20%); 32 width: 2em; 33 height: 2em; 34 transition: all .3s ease-in-out; 35} 36 37.icon { 38 --size: 20px; 39 width: var(--size); 40 height: var(--size); 41} 42 43/*Text*/ 44.card-text p { 45 line-height: 140%; 46 /*Delete this line for multi-line text*/ 47 white-space: nowrap; 48} 49 50.text-title { 51 font-weight: 900; 52 font-size: 1.2rem; 53 color: #222; 54} 55 56.text-subtitle { 57 color: #333; 58 font-weight: 500; 59 font-size: 1rem; 60} 61 62/*Hover*/ 63.card:hover { 64 box-shadow: 0 10px 20px 4px rgba(35, 35, 35, .1); 65} 66 67.card:hover .card-icon { 68 opacity: 1; 69 transform: translateX(20%); 70}
Comments
MIT License