Menu
I made the following tile, with an hover-effect that increases the font-size with an CSS-transition:
body {
font-family: 'Segoe UI', sans-serif;
}
.website {
width: 180px;
height: 73px;
text-align: center;
line-height: 80px;
margin: 1px;
color: white;
border-bottom: 5px solid darkslateblue;
background-color: darkslateblue;
white-space: nowrap;
overflow: hidden;
transition: border-color 0.66s ease-out, font-size 0.3s ease-out;
}
.website:hover {
font-size: 16pt;
cursor: pointer;
transition: border-color 0s;
border-color: black;
}<div class="website">Blog 1</div>
<div class="website">Blog 2</div>
<div class="website">Blog 3</div>When you hover them you can see that the transition of the font-size is not smooth at all. In other words it wiggles up and down when changing size.
Does anyone have an Idea how to fix or work around it?
369
Don't transition the width and the height. Keep the same width and height and just transition the border of your outer circle.
To prevent a text field from being resized, you can use the CSS resize property with its "none" value. After it you can use the height and width properties to define a fixed height and width for your <textarea> element.
CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.
The font-size-adjust property gives you better control of the font size when the first selected font is not available. When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the font-size-adjust property.
On hover put transition: border-color 0s, font-size 0.3s ease-out;
Because on hover transition: border-color 0s will give only border-color transition not give to font-size.
body {
font-family: 'Segoe UI', sans-serif;
}
.website {
width: 180px;
height: 73px;
text-align: center;
line-height: 80px;
margin: 1px;
color: white;
border-bottom: 5px solid darkslateblue;
background-color: darkslateblue;
white-space: nowrap;
overflow: hidden;
transition: border-color 0.66s ease-out, font-size 0.3s ease-out;
}
.website:hover {
font-size: 16pt;
cursor: pointer;
transition: border-color 0s, font-size 0.3s ease-out;
border-color: black;
}<div class="website">Blog 1</div>
<div class="website">Blog 2</div>
<div class="website">Blog 3</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
