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?
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?
Did you mean text-transform? https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
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
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.
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;
}
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.
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.