CODEWITHSUNDEEP
htmlcss
Kevin Nisay
Kevin Nisay

Reputation: 39

CSS hover state issue when adding letter spacing on a 90deg text

When I hover the p tag and add a letter-spacing on it, it messes up the entire text. I wanted to hover it and it stays in the same position with the letter-spacing on it.

#text {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 40%;
  top: 50%;
  font-size: 2em;
  transform: rotate(90deg);
}

#text:hover {
  letter-spacing: 10px
}
<p id="text">sample text rotation</p>

Upvotes: 1

Views: 85

Answers (3)

Roy
Roy

Reputation: 8079

The flickering happens because the transform-origin is wrong. You're rotating the text, so you should take the original transform-origin into account (which is from left to right).

See this updated code snippet for the result.

.text {
  position: absolute;
  transform-origin: top left;
  left: 70%;
  top: 20%;
  font-size: 2em;
  transform: rotate(90deg);
}

.text:hover {
  letter-spacing: 10px;
}
<p class="text">sample text rotation</p>

Upvotes: 0

Riskbreaker
Riskbreaker

Reputation: 4791

Couple of things:

  • You have 2 transform tags on your css
  • You still will need more spacing padding so the hover is not flickering

  • Also Im sure you wanted a transition so try this:

    #text { transition: letter-spacing 0.5s; }

#text {
  display: block;
  padding: 0;
  position: absolute;
  left: 40%;
  top: 50%;
  font-size: 2em;
  transform: translate(-50%, -50%) rotate(90deg);
  transition: letter-spacing 0.5s;
}

#text:hover {
  letter-spacing: 10px
}
<p id="text">sample text rotation</p>

You will probably need more block /width /spacing so it can get the right setup but thats all you...

Upvotes: -1

Kosh
Kosh

Reputation: 18423

Just add white-space: nowrap

BTW, your second transform rewrites the first one.
The correct use is transform: translate(-50%, -50%) rotate(90deg);

#text {
  position: absolute;
  transform: translate(-50%, -50%) rotate(90deg);
  left: 40%;
  top: 50%;
  font-size: 2em;
  white-space: nowrap;
}

#text:hover {
  letter-spacing: 10px
}
<p id="text">sample text rotation</p>

Upvotes: 3

Related Questions