#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 background: #f5f5f5; 5 padding: 2rem 1.5rem; 6 transition: box-shadow .3s ease, transform .2s ease; 7} 8 9.card-info { 10 display: flex; 11 flex-direction: column; 12 justify-content: center; 13 align-items: center; 14 transition: transform .2s ease, opacity .2s ease; 15} 16 17/*Image*/ 18.card-avatar { 19 --size: 60px; 20 background: linear-gradient(to top, #f1e1c1 0%, #fcbc97 100%); 21 width: var(--size); 22 height: var(--size); 23 border-radius: 50%; 24 transition: transform .2s ease; 25 margin-bottom: 1rem; 26} 27 28 29/*Card footer*/ 30.card-social { 31 transform: translateY(200%); 32 display: flex; 33 justify-content: space-around; 34 width: 100%; 35 opacity: 0; 36 transition: transform .2s ease, opacity .2s ease; 37} 38 39.card-social__item { 40 list-style: none; 41} 42 43.card-social__item svg { 44 display: block; 45 height: 18px; 46 width: 18px; 47 fill: #515F65; 48 cursor: pointer; 49 transition: fill 0.2s ease ,transform 0.2s ease; 50} 51 52/*Text*/ 53.card-title { 54 color: #333; 55 font-size: 1.5em; 56 font-weight: 600; 57 line-height: 2rem; 58} 59 60.card-subtitle { 61 color: #859ba8; 62 font-size: 0.8em; 63} 64 65/*Hover*/ 66.card:hover { 67 box-shadow: 0 8px 50px #23232333; 68} 69 70.card:hover .card-info { 71 transform: translateY(-5%); 72} 73 74.card:hover .card-social { 75 transform: translateY(100%); 76 opacity: 1; 77} 78 79.card-social__item svg:hover { 80 fill: #232323; 81 transform: scale(1.1); 82} 83 84.card-avatar:hover { 85 transform: scale(1.1); 86}
Comments
MIT License