Hover state symphony

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

.box {
    width: 100px;
    height: 100px;
    background-color: #F06292;
    border-radius: 10px;
    position: relative; /* Para posicionar o pseudoelemento */
    margin: 20px;
    animation: hover-glow 0.5s linear infinite;
  }

.box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transform: scale(0.9); /* Redimensiona o pseudoelemento */
  }
  /*  */

@keyframes hover-glow {
    0% { 
      transform: translateY(0); 
      border-radius: 10px; 
    }
    100% { 
      transform: translateY(-10px); 
      border-radius: 0;   
    }
  }  
  
 /* Configurações de hover */ 
  .box:hover {
    background-color: #D81B60; /* Muda a cor no hover */ 
    transform: translateY(-2px); /* Tranform posição*/
    box-shadow: 0 4px 8px rgba(248, 98, 186, 0.8); /* Adiciona sombra */
  }

Hover state symphony

Recommended

Gradient Color on Hover

Ethereum hover card

Navigation Hover Effect Pure CSS

HTML

CSS

JS

Recommended

Gradient Color on Hover

Ethereum hover card

Navigation Hover Effect Pure CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS