What am i missing with this css? Properly just missing something simple

#1 



nav ul li a {
    color: #1da1f2;
    font-family: 'Modak', cursive;
    text-decoration: none;
    font-size: 42px;
    transition: transform 3s;
}

nav ul li a:hover {
    transform: scale(1.5);
}

Why doesn’t this text transform?

#2

Did you mean text-transform? https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

1 Like
#3

No good call though I may not have written my question as clear

I am trying to get my text to scale on hover. So scale 1.5 should make it larger on hover.

I’ve done this before just having a lapse.

a:hover {
font-size:
}

Does something similar obviously but not nearly as smooth.

Maybe it was a keyframe I used before but was pretty sure it was just a transform: scale

#4

Can you show your full CSS file? Sounds like you might have a specificity issue because transform: scale(); should work otherwise. Hard to tell without seeing the full picture.

1 Like
#5

Sure thing.



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Utilities */

ul {
    list-style-type: none;
}

body {
    background: #e1e8ed;
}

/* Nav Bar */

nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    margin: 0 auto;
    height:5rem;
}

nav ul li a {
    color: #1da1f2;
    font-family: 'Modak', cursive;
    text-decoration: none;
    font-size: 42px;
    transition: transform 3s;
}

nav ul li a:hover {
    transform: scale(1.5);
    font-size: 52px;
}
#6

Obviously disregard the font-size: 52px as I just have that as a placeholder until I figured out my issue.

Yes that’s what I thought it should be working. Maybe have a spelling error somewhere. Not sure.

#7

Hmmm, don’t see the problem.
Maybe try scale: 1.5;
The scale CSS property allows you to specify scale transforms individually and independently of the transform property.
If that works, you’ll have to change your transition to target scale instead of transform.

1 Like
#8

Yeah, I found a work around but still not sure why the original wasn’t working and it was bugging me. Oh well, thanks for all the help. Appreciate this.

1 Like