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?
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.
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>
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>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);
}
z element, but HTML is tolerant enough to allow it.
