WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Effetto passaggio del mouse sull'icona
2055
ledoc
Apri nell'Editor
Video
Pubblica il Tuo Codice
5
Consigliato
2 October 2025
Struttura HTML del contenitore di animazione CSS
22 July 2025
Pagina di destinazione del Samsung Galaxy S24 Ultra
29 April 2025
AI del sito web (NON FUNZIONANTE)
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) */