9.3K views
1.wrapper { 2 display: inline-flex; 3 list-style: none; 4 height: 120px; 5 width: 100%; 6 padding-top: 40px; 7 font-family: "Poppins", sans-serif; 8 justify-content: center; 9} 10 11.wrapper .icon { 12 position: relative; 13 background: #fff; 14 border-radius: 50%; 15 margin: 10px; 16 width: 50px; 17 height: 50px; 18 font-size: 18px; 19 display: flex; 20 justify-content: center; 21 align-items: center; 22 flex-direction: column; 23 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 24 cursor: pointer; 25 transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 26} 27 28.wrapper .tooltip { 29 position: absolute; 30 top: 0; 31 font-size: 14px; 32 background: #fff; 33 color: #fff; 34 padding: 5px 8px; 35 border-radius: 5px; 36 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 37 opacity: 0; 38 pointer-events: none; 39 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 40} 41 42.wrapper .tooltip::before { 43 position: absolute; 44 content: ""; 45 height: 8px; 46 width: 8px; 47 background: #fff; 48 bottom: -3px; 49 left: 50%; 50 transform: translate(-50%) rotate(45deg); 51 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 52} 53 54.wrapper .icon:hover .tooltip { 55 top: -45px; 56 opacity: 1; 57 visibility: visible; 58 pointer-events: auto; 59} 60 61.wrapper .icon:hover span, 62.wrapper .icon:hover .tooltip { 63 text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); 64} 65 66.wrapper .facebook:hover, 67.wrapper .facebook:hover .tooltip, 68.wrapper .facebook:hover .tooltip::before { 69 background: #1877F2; 70 color: #fff; 71} 72 73.wrapper .twitter:hover, 74.wrapper .twitter:hover .tooltip, 75.wrapper .twitter:hover .tooltip::before { 76 background: #1DA1F2; 77 color: #fff; 78} 79 80.wrapper .instagram:hover, 81.wrapper .instagram:hover .tooltip, 82.wrapper .instagram:hover .tooltip::before { 83 background: #E4405F; 84 color: #fff; 85} 86 87
david-mohseni
David Mohseni
MIT License