Ir para conteúdo
Fórum Script Brasil
  • 0

Texto esmaecendo no hover


matheussbs

Pergunta

Percebo que quando passo o mouse no botão Power o botão sobe e aparece o blur da forma que eu quero, porém por eu estar usando transition isso reflete no meu texto fazendo com que ele esmaeça, fique um pouco desfocado durante o hover. De que forma posso arrumar isso? Outra dúvida é de como que posso fazer o blur aparecer mais suavemente já que ele é um before já pronto digamos?

Codesandbox: https://codesandbox.io/s/nameless-sunset-f679f?file=/style.css:0-1547

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <div class="button">
          <svg
            class="power"
            width="31"
            height="34"
            viewBox="0 0 31 34"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M24.9581 8.95874C26.8418 10.8467 28.1244 13.2518 28.6439 15.8701C29.1634 18.4883 28.8963 21.2021 27.8765 23.6683C26.8567 26.1345 25.1299 28.2424 22.9145 29.7253C20.6991 31.2083 18.0946 31.9999 15.4302 31.9999C12.7659 31.9999 10.1613 31.2083 7.94593 29.7253C5.73053 28.2424 4.00376 26.1345 2.98395 23.6683C1.96414 21.2021 1.69709 18.4883 2.21656 15.8701C2.73603 13.2518 4.0187 10.8467 5.90238 8.95874"
              stroke="#590AA3"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              opacity="0.5"
              d="M15.4375 2V16.9979"
              stroke="#590AA3"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
        <div class="content">
          <h3>Titulo</h3>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic eos
            consectetur quidem sunt explicabo aliquam corrupti nulla
            necessitatibus enim, debitis officiis, ducimus nihil cumque in rerum
            accusamus tenetur tempora nemo.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 700px;
  height: 800px;
  /* border: 1px solid red; */

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;
}

.box {
  width: 500px;
  height: 500px;
  background-color: blue;
  transform: skewY(-5deg);

  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
}

.button {
  margin-top: -45px;
  width: 100px;
  height: 100px;

  background: #13161d;

  transform: skewY(5deg);

  display: flex;
  justify-content: center;
  align-items: center;
}
.button::before {
  content: "";
  width: 60px;
  height: 30px;
  background: crimson;
  filter: blur(15px);
  border-bottom: 2px solod crimson visible;
  position: absolute;
  bottom: 0;
  visibility: hidden;
  transition: 0.4s;
  /* transition-timing-function: ease;
  transition-delay: 0.3; */
}

.button:hover:before {
  visibility: visible;
}

.button:hover path {
  stroke: red;
}

svg {
  transition: 0.4s;
  transition-timing-function: ease-in-out;
  width: 50px;
  height: 50px;
}

path {
  stroke: blue;
}

.button:hover svg {
  transform: translate(0, -15px);
}

.content h3 {
  margin-top: 60px;
  transform: skewY(5deg);
  text-align: center;
  font-size: 48px;
  color: darkgrey;
  width: 90px;
}

.content p {
  margin-top: 20px;
  transform: skewY(5deg);
  /* border: 1px solid red; */
  width: 300px;
  color: #fff;
  font: 20px "sans-serif", arial;
  /* text-align: center; */
}

 

Editado por matheussbs
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...