WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Icon Hover Effect
2064
ledoc
Open In Editor
Video
Publish Your Code
5
Recommended
1 October 2023
Glowing Text Effect
16 October 2025
CSS Animated Loading Screen with Code Effect
25 August 2024
Hover effect of drinking soda
HTML
Copy
Home
Profile
Likes
Settings
Search
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #222; --clr: #fff; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: var(--bg); } ul { position: relative; display: flex; gap: 50px; } ul li { position: relative; list-style: none; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.5s; } ul li::before { content: &singleQuote;&singleQuote;; position: absolute; inset: 30px; box-shadow: 0 0 0 10px var(--clr), 0 0 0 20px var(--bg), 0 0 0 22px var(--clr); transition: 0.5s; } ul li:hover::before { inset: 15px; } ul li::after { content: &singleQuote;&singleQuote;; position: absolute; inset: 0; background: var(--bg); transform: rotate(45deg); transition: 0.5s; } ul li:hover::after { inset: 0px; transform: rotate(0deg); } ul li a { position: relative; text-decoration: none; z-index: 10; display: flex; justify-content: center; align-items: center; } ul li a i { font-size: 2em; transition: 0.5s; color: var(--clr); opacity: 1; } ul li:hover a i { color: var(--clr); transform: translateY(-40%); } ul li a span { position: absolute; font-family: sans-serif; color: var(--clr); opacity: 0; transition: 0.5s; transform: scale(0) translateY(200%); } ul li:hover a span { opacity: 1; transform: scale(1) translateY(100%); } ul li:hover a i, ul li a span { filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr)); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */