CODEWITHSUNDEEP
csscolorstransition
LeBlaireau
LeBlaireau

Reputation: 17467

Css transition - text fill from bottom

I have black text that I would like to make yellow on hover.

However I would like to transition to make the text fill the colour from the bottom to the top of the text.

Is possible with pure css?

Upvotes: 1

Views: 2341

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39392

  1. Store the same text in data-* attribute.
  2. Place it on exactly above the text with ::before or ::after pseudo element.
  3. Animate its height to 0 on hover.

.text {
  display: inline-block;
  vertical-align: top;
  position: relative;
  line-height: 40px;
  font-size: 30px;
  cursor: pointer;
  margin: 20px;
  color: gold;
}

.text:before {
  transition: height 0.5s ease;
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  height: 40px;
  color: black;
  left: 0;
  top: 0;
}

.text:hover:before {
  height: 0;
}
<div class="text" data-text="Some text here">Some text here</div>

Upvotes: 5

Related Questions