hover memory

Open In Editor Publish Your Code

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

hover memory

Recommended

Hover...

Buttons Gradient Hover

Call Action Button Hover Effect

HTML

CSS

JS

Recommended

Hover...

Buttons Gradient Hover

Call Action Button Hover Effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS