3.1K views
CSS
1.card { 2 --bg: #f7f7f8; 3 --hover-bg: #FFE5F4; 4 --hover-text: #E50087; 5 max-width: 23ch; 6 text-align: center; 7 background: var(--bg); 8 padding: 1.5em; 9 padding-block: 1.8em; 10 border-radius: 5px; 11 position: relative; 12 overflow: hidden; 13 transition: .3s cubic-bezier(.6,.4,0,1),transform .15s ease; 14 display: flex; 15 flex-direction: column; 16 justify-content: center; 17 align-items: center; 18 gap: 1em; 19} 20 21.card__body { 22 color: #464853; 23 line-height: 1.5em; 24 font-size: 1em; 25} 26 27.card > :not(span) { 28 transition: .3s cubic-bezier(.6,.4,0,1); 29} 30 31.card > strong { 32 display: block; 33 font-size: 1.4rem; 34 letter-spacing: -.035em; 35} 36 37.card span { 38 position: absolute; 39 inset: 0; 40 width: 100%; 41 height: 100%; 42 display: flex; 43 justify-content: center; 44 align-items: center; 45 color: var(--hover-text); 46 border-radius: 5px; 47 font-weight: bold; 48 top: 100%; 49 transition: all .3s cubic-bezier(.6,.4,0,1); 50} 51 52.card:hover span { 53 top: 0; 54 font-size: 1.2em; 55} 56 57.card:hover { 58 background: var(--hover-bg); 59} 60 61.card:hover>div,.card:hover>strong { 62 opacity: 0; 63}
HTML
1<div class="card"> 2 <div class="icon"> 3 <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"> 4 <path d="M11.984 16.815c2.596 0 4.706-2.111 4.706-4.707 0-1.409-.623-2.674-1.606-3.538-.346-.303-.735-.556-1.158-.748-.593-.27-1.249-.421-1.941-.421s-1.349.151-1.941.421c-.424.194-.814.447-1.158.749-.985.864-1.608 2.129-1.608 3.538 0 2.595 2.112 4.706 4.706 4.706zm.016-8.184c1.921 0 3.479 1.557 3.479 3.478 0 1.921-1.558 3.479-3.479 3.479s-3.479-1.557-3.479-3.479c0-1.921 1.558-3.478 3.479-3.478zm5.223.369h6.777v10.278c0 2.608-2.114 4.722-4.722 4.722h-14.493c-2.608 0-4.785-2.114-4.785-4.722v-10.278h6.747c-.544.913-.872 1.969-.872 3.109 0 3.374 2.735 6.109 6.109 6.109s6.109-2.735 6.109-6.109c.001-1.14-.327-2.196-.87-3.109zm2.055-9h-12.278v5h-1v-5h-1v5h-1v-4.923c-.346.057-.682.143-1 .27v4.653h-1v-4.102c-1.202.857-2 2.246-2 3.824v3.278h7.473c1.167-1.282 2.798-2 4.511-2 1.722 0 3.351.725 4.511 2h7.505v-3.278c0-2.608-2.114-4.722-4.722-4.722zm2.722 5.265c0 .406-.333.735-.745.735h-2.511c-.411 0-.744-.329-.744-.735v-2.53c0-.406.333-.735.744-.735h2.511c.412 0 .745.329.745.735v2.53z"></path> 5 </svg> 6 </div> 7 <strong> Instagram 8 </strong> 9 <div class="card__body"> 10 Get UI elements that help you stand out. 11 </div> 12 <span>Follow us</span> 13</div>