#e8e8e8
1/*Magic card*/ 2.card { 3 width: 190px; 4 height: 254px; 5 background: #f5f5f5; 6 overflow: visible; 7 box-shadow: 0 5px 20px 2px rgba(0,0,0,0.1); 8 display: flex; 9 flex-direction: column; 10 align-items: center; 11} 12 13.card-info { 14 display: flex; 15 flex-direction: column; 16 align-items: center; 17 gap: 2em; 18 padding: 0 1rem; 19} 20 21.card-img { 22 --size: 100px; 23 width: var(--size); 24 height: var(--size); 25 border-radius: 50%; 26 transform: translateY(-50%); 27 background: #42caff; 28 background: linear-gradient(to bottom, #42caff 0%, #e81aff 100%); 29 position: relative; 30 transition: all .3s ease-in-out; 31} 32 33.card-img::before { 34 content: ""; 35 border-radius: inherit; 36 position: absolute; 37 top: 50%; 38 left: 50%; 39 width: 90%; 40 height: 90%; 41 transform: translate(-50%, -50%); 42 border: 1rem solid #e8e8e8; 43} 44 45/*Text*/ 46.text-title { 47 text-transform: uppercase; 48 font-size: 0.75em; 49 color: #42caff; 50 letter-spacing: 0.05rem; 51} 52 53.text-body { 54 font-size: .8em; 55 text-align: center; 56 color: #6f6d78; 57 font-weight: 400; 58 font-style: italic; 59} 60 61/*Hover*/ 62.card:hover .card-img { 63 --size: 110px; 64 width: var(--size); 65 height: var(--size); 66}
Comments
MIT License