Texto esmaecendo no hover

matheussbs · Dezembro 24, 2021

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 Dezembro 24, 2021 por matheussbs

Entrar

Texto esmaecendo no hover

Pergunta

matheussbs

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades