WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Hover effect icons
3534
Andev.web
Open In Editor
Video
Publish Your Code
12
Recommended
21 July 2025
HTML TV Screen with YouTube Embed & Effects
23 March 2025
Button Hover Glow
6 November 2024
Slice Text Effect
HTML
Copy
Spotify
Pinterest
Dribbble
Telegram
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); * { font-family: 'Poppins', sans-serif; } body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; background-color: #e8e8e8; } .container { display: flex; justify-content: center; align-items: center; height: 100vh; } ul { list-style: none; } .example-2 { display: flex; justify-content: center; align-items: center; } .example-2 .icon-content { margin: 0 10px; position: relative; } .example-2 .icon-content .tooltip { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); color: #fff; padding: 6px 10px; border-radius: 15px; opacity: 0; visibility: hidden; font-size: 14px; transition: all 0.3s ease; } .example-2 .icon-content:hover .tooltip { opacity: 1; visibility: visible; top: -50px; } .example-2 .icon-content a { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 20%; color: #4d4d4d; background-color: #ffff; transition: all 0.3s ease-in-out; } .example-2 .icon-content a:hover { box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 50%); } .example-2 .icon-content a svg { position: relative; z-index: 1; width: 30px; height: 30px; } .example-2 .icon-content a:hover { color: white; } .example-2 .icon-content a .filled { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: 0; background-color: #000; transition: all 0.3s ease-in-out; } .example-2 .icon-content a:hover .filled { height: 100%; } .example-2 .icon-content a[data-social="spotify"] .filled, .example-2 .icon-content a[data-social="spotify"] ~ .tooltip { background-color: #1db954; } .example-2 .icon-content a[data-social="pinterest"] .filled, .example-2 .icon-content a[data-social="pinterest"] ~ .tooltip { background-color: #bd081c; } .example-2 .icon-content a[data-social="dribbble"] .filled, .example-2 .icon-content a[data-social="dribbble"] ~ .tooltip { background-color: #ea4c89; } .example-2 .icon-content a[data-social="telegram"] .filled, .example-2 .icon-content a[data-social="telegram"] ~ .tooltip { background-color: #0088cc; }
JS
Copy