memoria hover

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

30 September 2025

Animazione CSS Sphere con effetti hover

13 June 2025

* {
      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; 
    }

memoria hover

Consigliato

Animazione CSS Sphere con effetti hover

Effetto hovering sulla mappa

Sinfonia dello stato di Hover

HTML

CSS

JS

Consigliato

Animazione CSS Sphere con effetti hover

Effetto hovering sulla mappa

Sinfonia dello stato di Hover

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS