WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
memoria hover
29
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
13 June 2025
Effetto hovering sulla mappa
9 December 2024
Effetto di animazione HTML CSS e Javascript Hover
23 March 2025
Pulsante Hover Bagliore
HTML
Copy
I
II
III
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .animation-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background-color: #000; } /* Estilos para o Hover Memory */ .memory-item { position: relative; width: 150px; height: 150px; border-radius: 10px; margin: 20px; background: #333; overflow: hidden; } .memory-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); /* Inicialmente transparente */ pointer-events: none; /* Permitir clicar no ícone */ transform: scale(0.8); } .memory-item:hover::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; transform: scale(1); opacity: 1; transition: all 0.3s ease; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */