0

I have a title on my website and want to animate the letters when hovering over it with the mouse. Here is the relevant snippets of what I have so far:

.title-text {
  color: #000000;
}
.title-text span:hover {
  color: #ff0000;
}
<h1 class="title-text">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</h1>

This works fine and individual letters turn red on hover. However, I can't seem to rotate individual letters, I tried everything from a simple rotate: 45deg; to an animation with KeyFrames but nothing happens. How can I animate the letters on hover?

eligolf
  • 1,682
  • 1
  • 6
  • 22

1 Answers1

1

To apply transforms you need to use a block level element, spans are naturally inline and can't be rotated:

.title-text {
  color: #000000;
}

.title-text span {
  display: inline-block;
  transition: transform 1s;
}

.title-text span:hover {
  transform: rotate(45deg);
}
<h1 class="title-text">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</h1>
DBS
  • 9,110
  • 4
  • 35
  • 53
  • Thank you so much, this works very well with some adjustments! The span covers other spans when rotating (on my own site) so if I rotate the first letter the second will be covered by that span and therefore it still thinks I hover the first span. This is because my spans are higher than they are wide, but that was not included in my first question so I will accept this and solve the other things somehow :) – eligolf Oct 28 '22 at 09:27