4 demos of Creating hover effects with jQuery plug-in

The hovering effect

As you bring the mouse over an element, the hover event occurs. You may perform certain things by using jQuery as this occurs.

In this tutorial, I am using the “jQuery-hover-effects” plug-in, which is a light-weight, just 6Kb JS file for creating hover effects on elements.

Basically, this plug-in will show the hidden content as you bring the mouse over the specified element. The element can be an image, a text paragraph or other sections of a web page. See the section below for demos and setting up guide for using this nice plug-in in your web projects.

A demo of hovering effect in an image

In this example, an image is used with the plug-in. As you bring the mouse over the image, the hidden content will be visible.

The hidden content is shown in an overlay which properties are set in the <script> section. See the example and code in the demo page:

jQuery hover

See online demo and code

So how is it done? First of all, include the jQuery library above the </body> tag. This is followed by referring the plug-in file, hovereffect.js. You can download this file from the package here or by view source the demo page and open the hovereffect.js.js file and save in your system.

In the markup section, create an element where you want hovering effect; in case of demo, this is an image:

 

Finally, place the code for calling the overlay:

 

The properties of the overlay: its background, height, width, direction etc. are set in the <script> section:

 

Changing the default properties example

In this example, a few properties of the overlay are changed. The opacity value is kept 0.5 while background-color, font-color are also changed.

Along with this, you can also change the direction of the overlay as the mouse is brought over the element. For the demo, I used right as the mouse is brought over and bottomLeft as mouse is out of the image. See the live example with code:

jQuery hover effect

See online demo and code

Look at the script section where properties are changed:

 

A demo of hover effect in a div element

In this example, I am using a div tag with dummy text to show that you may also use this plug-in with text elements like <div>, <P>, <span> etc. as well.

The overlay properties are also changed a bit while opacity is kept more than above examples.

jQuery hover div

See online demo and code

Following is the markup used in above example:

 

This is the <script> part:

 

See the complete code in demo page.

An example of adding list in overlay

You can use different piece of content including images in the small overlay that is visible as mouse is brought over the specified element.

In this example, I have used list items as you bring the mouse over a “product image”. This plug-in becomes useful in this kind of scenario as you may show information of products in different ways including list format.

See the example below:

jQuery hover list

See online demo and code

You can see, three product images are shown as the demo page loads. On each image, the heading is different while all are sharing the same script for showing the overlay.

That means you can show dynamic product listings along with DB driven information in list or some other format, along with images etc. by using this nice jQuery plug-in.