Textmarker Hover Effect Freebie

In this short tutorial we would like to show you how to create a Text Marker Hover Effect.
The idea is to highlight the hovered content with an eye catching effect and help your visitors to concentrate on the most important part of your content.

The effect relies on simple CSS transitions and is build quickly.  You can use this with any text based content, like a span, p, or a tag.

For those who like to work with ready to use solutions, we also prepared a short html example downloadable below.

1. Web Technologies

Just a small overview on the technologies used in this tutorial.
Feel free to browse the resources for additional background information on various topics.

CSS Transitions
Allow property changes in CSS values to occur smoothly over a specified duration.
HTML5 Markups
This specification defines the 5th major revision of the core language of the World Wide Web.

2. The Markup

Basically you can use any markup for this effect. Since the effect we use needs the css display:inline attribute, you will need to make sure that the margins / paddings are added through some other html tags or pseudo elements.
In our example we will add a clearfix and a height attribute via a following div element.

The “textmarker” class will give our text content the eye catching hover effect.  And now lets see what the CSS looks like!

2. The CSS

Please note that we don’t use vendor prefixes in the css settings of any of our examples below.You will of course find them in the example download!
In this example we are not going to discuss the default styling of the actual content, since it will have to be individually added, removed and adjusted based on your needs.
Also we use the Normalize.css which is included in the HTML5 Boilerplate.

The trick is to use and animate a background image (could also be an actual background image, depending to your needs). In our example we draw this background image with the linear-gradient function.
This gives us more flexibility to change the color of the fill effect, and reduces the load time of the page.

For the idle phase, we need to put the background outside of the content part, so it becomes invisible.

We give a standard 0.5 sec background position transition to our element. You can still add color changes, etc. to your own element to increase the effect based on your needs.

Now the only thing we need to do is to add the hover based CSS attributes, and animate the background to its final position as shown below:

Now lets animate from the right side to the left. This needs only a minimal extension to the class we created already:

License

Our freebies are released under the terms of the MIT license.

The MIT License is simple and easy to understand and it places almost no restrictions on what you can do with our freebie item.

You are allowed to: use any ThemePunch freebie plugin in your project (even commercial projects) as long as the copyright header is left intact.

You MUST NOT:
Provide our freebies on any other site as is.
Sell our freebies.

The “textmarker” class will give our text content the eye catching hover effect.  And now lets see what the CSS looks like !