CSS Font Size: Avoid jitter / wig

Question

I made the following tile with a hover effect, which increases font-sizewith 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>

Run codeHide result

When you aim them, you can see that the transition is font-sizenot smooth. In other words, it changes up and down when resizing.
Does anyone have an idea how to fix or get around this?

Answer 1

Instead of a smoother transition, you can use CSS transform:scalelike this:

.website:hover {
  cursor: pointer;
  transition: border-color 0.4s;
  border-color: black;
}
.website div {
  transition: transform 0.3s ease-out;
}
.website:hover div {
  transform: scale(1.5);
  transition: transform 0s;
}

Here is the JSFiddle daemon

, div, div, :)

Answer 2

transition: border-color 0s, font-size 0.3s ease-out;

transition: border-color 0s border-color 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>

Hide result