Animated highlighted text

Animated-highlighted-text.markdown

Animated highlighted text

This pen was inspired by webdesignerdepot's new design, the title on each article will be highlighted when user hovered it.

The idea is simple, it make used of linear gradient and transition.

1. We set the title to be inline element (This will break every background when the title breaked into lines)
2. Apply linear-gradient background, with half transparent-color, and highlighted color on the other half. then make it 200% size.
3. Change the background-position-x to -100%, it will push the highligted color 100% to the right.
4. Apply transition property to get the nice sliding effect.

Forked from Rian Ariona's Pen Animated highlighted text.

A Pen by Seth Broweleit on CodePen.

License.

index.html

<div class="card">
	<h1 class="entry-title">
    <a href="http://www.ariona.net">This text will be highlighted when hovered <br> Inspired by webdesignerdepot new design</a>
  </h1>
	<br />
  <small>By <a href="http://www.ariona.net">Ariona Rian</a></small>
  
  <span>See details for walkthrough</span>
  <span>See Also: <a href="http://codepen.io/ariona/pen/JopOOr" target="_blank">3D hove plane effect</a></span>
</div>

style.scss

body{
	background: #1abc9c;
	text-transform:uppercase;
	font-family:sans-serif;
	margin:11% 33%;
}
a{
	color:#fff;
	text-decoration:none;
}

h1{
  background: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(22, 160, 133,1) 50%);
  background-size: 200%;
  background-position: 0 0;
  display: inline;
  transition: .5s ease-in-out;
}
h1:hover{
	background-position: -100% 0;
}