CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Nash Vail
Nash Vail

Reputation: 868

How to Progressively highlight a chunk of text using jquery/js/css

The effect can be seen live at Webdesignerdepot.com . When you hover over the title of a post the title highlights progressively also when you remove the cursor from the title before the animation is complete the highlight rolls back to its original state.

I tried animating the background color, but the problem that I faced was background color extended the whole div even when text didn't completely filled the div.

I have been thinking of adding an extra div with a z-index less than that of the text and then animating its width, but it would fail since text can extend more than one line. If the resulting effect is to be achieved with the same process it will result in multiple divs making the program really complex. I couldn't think of any other way of achieving this. Any other workarounds/techniques I can use?

Upvotes: 0

Views: 382

Answers (1)

nada
nada

Reputation: 972

Use javascript console or firebug or something like that and it's really easy to get a website styles.

CSS

a {
  background-size: 200.22% auto;
  -webkit-background-size: 200.22% auto;
  -moz-background-size: 200.22% auto;
  background-position: -0% 0;
  background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #ddd 50%);
  transition: background-position 0.5s ease-out;
  -webkit-transition: background-position 0.5s ease-out;
}

a:hover {
  background-position: -99.99% 0;
}

HTML

<a>something</a>

Upvotes: 3

Related Questions