Tooltip by PriyanshuGupta28
#e8e8e8
1ul { 2 list-style: none; 3} 4 5.example-1 { 6 display: flex; 7 justify-content: center; 8 align-items: center; 9} 10.example-1 .icon-content { 11 margin: 0 10px; 12 position: relative; 13} 14.example-1 .icon-content .tooltip { 15 position: absolute; 16 top: -30px; 17 left: 50%; 18 transform: translateX(-50%); 19 background-color: #000; 20 color: #fff; 21 padding: 6px 10px; 22 border-radius: 5px; 23 opacity: 0; 24 visibility: hidden; 25 font-size: 14px; 26 transition: all 0.3s ease; 27} 28.example-1 .icon-content:hover .tooltip { 29 opacity: 1; 30 visibility: visible; 31 top: -50px; 32} 33.example-1 .icon-content .link { 34 display: flex; 35 justify-content: center; 36 align-items: center; 37 width: 50px; 38 height: 50px; 39 border-radius: 50%; 40 color: #4d4d4d; 41 background-color: #fff; 42 transition: all 0.3s ease-in-out; 43} 44.example-1 .icon-content .link:hover { 45 box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%); 46} 47.example-1 .icon-content .link svg { 48 width: 30px; 49 height: 30px; 50} 51.example-1 .icon-content .link[data-social="spotify"]:hover { 52 color: #1db954; 53} 54.example-1 .icon-content .link[data-social="pinterest"]:hover { 55 color: #bd081c; 56} 57.example-1 .icon-content .link[data-social="dribbble"]:hover { 58 color: #ea4c89; 59} 60.example-1 .icon-content .link[data-social="telegram"]:hover { 61 color: #0088cc; 62} 63
2.5K views
2.5K views
MIT License