-1

I have the following code:

z {
  color: #0563bb;
}

z:hover {
  transform: translate(0, -7px);
  box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2),
}
 <p>Hi there <z>This is the text that needs the hover animation</z>

Why doesn't the animation seem to work? Is it because its text or am I doing something wrong?

CodeUser2300
  • 53
  • 7

4 Answers4

1

It just needs a block-style display, as in display:inline-block; Additionally, I added a transition on the element for a little animation.

Note: Your box-shadow values were not valid. I corrected them, but take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Thanks @evolutionxbox for the guidance and extra set of eyes

z {
  color: #0563bb;
  display:inline-block;
  transition: transform .3s;
}

z:hover {
  transform: translate(0, -7px);
  box-shadow: 0px 32px 25px 8px rgba(0, 0, 0, .2);
}
<p>Hi there <z>This is the text that needs the hover animation</z></p>
Kinglish
  • 23,358
  • 3
  • 22
  • 43
1

Your box-shadow property value is invalid. Remove the commas:

z {
  color: #0563bb;
  display:inline-block;
}

z:hover {
  transform: translate(0, -7px);
  box-shadow: 0px 32px 25px -8px rgba(0, 0, 0)  /* percentage removed for demonstration */
}
<p>Hi there <z>This is the text that needs the hover animation</z>

If you want to make the changes "animate", simply specify a transition duration:

z {
  color: #0563bb;
  display:inline-block;
  transition:0.5s;
}

z:hover {
  transform: translate(0, -7px);
  box-shadow: 0px 32px 25px -8px rgba(0, 0, 0)  /* percentage removed for demonstration */
}
<p>Hi there <z>This is the text that needs the hover animation</z>
Spectric
  • 30,714
  • 6
  • 20
  • 43
1

The problem there is you are using transform but not transition. This way the text jumps to the next state without an animation. This should fix your problem:

z {
  color: #0563bb;
  display:inline-block;
  trasform: translate(0, 0);
  transition: all 0.8s linear;
}

z:hover {
  transform: translate(0, -7px);
  box-shadow: 0px 32px 25px -8px rgba(0, 0, 0, .2);
  transition: all 0.8s linear;
}
<p>Hi there <z>This is the text that needs the hover animation</z></p>

You should also remove the comas from the box-shadow value.

Rafael Freitas
  • 201
  • 2
  • 7
0

There is no Element have name <z> in HTML, You Should not Put , in the last Line so The right Code in HTML mey be Lik eThis:

<p>Hi there <div class="z">This is the text that needs the hover animation</div></p>

and CSS Like This :

.z {
  color: red;
  display: inline-block;
 }

.z:hover {
  transform: translate(0, -7px);
  box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2);
}

Or You should add Closing Tag For p Tag and Remove , in CSS Code and Replace it with ;. So Your Code Mey Be Like This:

<p>Hi there <z>This is the text that needs the hover animation<z></p>

and CSS Like This:

z {
  color: red;
  display: inline-block;
 }

z:hover {
  transform: translate(0, -7px);
  box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2);
}
Ahmed Mohamed
  • 3
  • 1
  • 4