WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
hover memory
673
ByBy.inc
Open In Editor
Publish Your Code
Recommended
22 November 2025
CSS Liquid Glass Button Hover Effect
14 September 2024
Hover slider (dark/light)
30 March 2025
World Places (CSS 3d hover)
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) */