5.3K views
CSS
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}
HTML
1 <div class="card"> 2 <div class="card-info"> 3 <div class="card-avatar"></div> 4 <div class="card-title">Steve Jobs</div> 5 <div class="card-subtitle">CEO & Co-Founder</div> 6 </div> 7 <ul class="card-social"> 8 <li class="card-social__item"> 9 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 10 <path d="M14 9h3l-.375 3H14v9h-3.89v-9H8V9h2.11V6.984c0-1.312.327-2.304.984-2.976C11.75 3.336 12.844 3 14.375 3H17v3h-1.594c-.594 0-.976.094-1.148.281-.172.188-.258.5-.258.938V9z"></path> 11 </svg></li> 12 <li class="card-social__item"> 13 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 14 <path d="M20.875 7.5v.563c0 3.28-1.18 6.257-3.54 8.93C14.978 19.663 11.845 21 7.938 21c-2.5 0-4.812-.687-6.937-2.063.5.063.86.094 1.078.094 2.094 0 3.969-.656 5.625-1.968a4.563 4.563 0 0 1-2.625-.915 4.294 4.294 0 0 1-1.594-2.226c.375.062.657.094.844.094.313 0 .719-.063 1.219-.188-1.031-.219-1.899-.742-2.602-1.57a4.32 4.32 0 0 1-1.054-2.883c.687.328 1.375.516 2.062.516C2.61 9.016 1.938 7.75 1.938 6.094c0-.782.203-1.531.609-2.25 2.406 2.969 5.515 4.547 9.328 4.734-.063-.219-.094-.562-.094-1.031 0-1.281.438-2.36 1.313-3.234C13.969 3.437 15.047 3 16.328 3s2.375.484 3.281 1.453c.938-.156 1.907-.531 2.907-1.125-.313 1.094-.985 1.938-2.016 2.531.969-.093 1.844-.328 2.625-.703-.563.875-1.312 1.656-2.25 2.344z"></path> 15 </svg></li> 16 <li class="card-social__item"> 17 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 18 <path d="M19.547 3c.406 0 .75.133 1.031.398.281.266.422.602.422 1.008v15.047c0 .406-.14.766-.422 1.078a1.335 1.335 0 0 1-1.031.469h-15c-.406 0-.766-.156-1.078-.469C3.156 20.22 3 19.86 3 19.453V4.406c0-.406.148-.742.445-1.008C3.742 3.133 4.11 3 4.547 3h15zM8.578 18V9.984H6V18h2.578zM7.36 8.766c.407 0 .743-.133 1.008-.399a1.31 1.31 0 0 0 .399-.96c0-.407-.125-.743-.375-1.009C8.14 6.133 7.813 6 7.406 6c-.406 0-.742.133-1.008.398C6.133 6.664 6 7 6 7.406c0 .375.125.696.375.961.25.266.578.399.984.399zM18 18v-4.688c0-1.156-.273-2.03-.82-2.624-.547-.594-1.258-.891-2.133-.891-.938 0-1.719.437-2.344 1.312V9.984h-2.578V18h2.578v-4.547c0-.312.031-.531.094-.656.25-.625.687-.938 1.312-.938.875 0 1.313.578 1.313 1.735V18H18z"></path> 19 </svg> 20 </li> 21 </ul> 22</div>