होवर मेमोरी

अनुशंसित

11 December 2024

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

होवर मेमोरी

अनुशंसित

बटन होवर

होवर स्टेट सिम्फनी

3D कार्ड होवर प्रभाव

HTML

CSS

JS

अनुशंसित

बटन होवर

होवर स्टेट सिम्फनी

3D कार्ड होवर प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS