होवर मेमोरी

399 ByBy.inc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

30 August 2024

एनिमेटेड ड्रैकुला होवर प्रभाव वाला बटन

10 February 2024

बटन होवर एनिमेशन

22 August 2024

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

HTML

CSS

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

अनुशंसित

एनिमेटेड ड्रैकुला होवर प्रभाव वाला बटन

बटन होवर एनिमेशन

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS