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

HTML CSS and Javascript Hover Animation Effect

World Places (CSS 3d hover)

Memory Mini Game

HTML

CSS

JS

Recommended

HTML CSS and Javascript Hover Animation Effect

World Places (CSS 3d hover)

Memory Mini Game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS