WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Icon Hover Effect
1925
ledoc
Open In Editor
Video
Publish Your Code
5
Recommended
14 September 2024
Hover slider
16 October 2025
CSS Animated Background with Loading Effect
30 March 2025
World Places (CSS 3d hover)
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) */