CODEWITHSUNDEEP
htmlcsscss-transforms
Ivan Topić
Ivan Topić

Reputation: 3185

Hovering on element glitches transform transition

How to stop each letter for glitching when hovering on its bottom part? It happens because the letter changes position so it is rapidly toggling its transition, but how to code this better so transition will be smooth? https://codepen.io/anon/pen/XBmPMV

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
}

#text span {
  display: inline-block;
  transition: transform 200ms;
}

#text span:hover {
  transform: translateY(-1em) rotate(10deg) scale(1.5);
}
<div class="container">
  <div id="text">
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
  </div>
</div>

Upvotes: 1

Views: 1380

Answers (2)

Temani Afif
Temani Afif

Reputation: 272909

Consider a pseudo element that will make the hover area bigger:

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
}

span {
  display: inline-block;
  transition: transform 200ms;
  position: relative;
}

span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

span:hover {
  transform: translateY(-1em) rotate(10deg) scale(1.5);
}

span:hover::before {
  transform:rotate(-10deg);
  height: calc(100% + 0.5em);
}
<div class="container">
  <div id="text">
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
  </div>
</div>

Upvotes: 3

kingkong
kingkong

Reputation: 13

Applying a border to the elements while hovered to increase their area does the trick. If you go this route, you also need to apply a negative margin while hovering to keep the elements in place.

#text {
  cursor: pointer;
  font-size: 7em;
  font-weight: 700;
  text-transform: uppercase;
  span {
    display: inline-block;
  transition: transform 200ms;
    &:hover {
      transform: translateY(-1em) rotate(10deg) scale(1.5);
      border: 0.3em solid transparent;
      margin: -0.3em;
    }
  }
}

Upvotes: 1

Related Questions