Lightweight Rollover Effect with jQuery and CSS

In today’s tutorial I’ll show you how to create a CSS rollover with a smooth fade in/fade out effect using jQuery. In this example we are going to create a simple social navigation bar where we’ll link to our FaceBook, Twitter, Google+, Linkedin, RSSfeed, E-mail and Pinterest.

By the end of this tutorial you should end up with something like example below:


  So let’s get started.

1) First let’s create our image sprites

This first image is what we’ll load first. Let’s name this ‘social-sprites.png’ (You can right click this image and save as on your computer)

social-sprites

This second image contains our rollover/hover state. We’ll name this image ‘social-sprites-hover.png’ (You can right click this image and save as on your computer)

social-sprites-hover

2) Now let’s create a basic html page.

You can copy and paste this html code in a text editor and save it as hover.html

3) Create an unordered list

Now lets create an unordered list with all our links and let’s add an ‘id’ to our list and name it ‘socialnavigation’ as well as all the items in it so they are all unique. So it looks like this.

 Next insert the above list between the <body></body> tags of your html page.

3) Let’s add some style

 Now that we have our list of links complete it’s time to apply some CSS styling to it. This will essentially create our CSS rollover effect.

4) Attach style to page

You can either save this stylesheet as a separate file and name it i.e. style.css and include it in your html page or just simply embed it between the <head></head> tags. In this example we’ll just go ahead an embed it in our html page.

 At this point you should have a basic image sprite based rollover effect. While this can satisfy for most uses it is kind of plain and unexciting, so what will do now is incorporate jQuery to spice things up a bit. So what I want this rollover to do is to initially have a state (or the initial inactive state) where it is of a certain intensity (and this is where jQuery comes in, another state when we rollover it and the final state when we roll away from it and we want the in between actions to have a smooth fadein and fadeout effect. We can simply embed the jQuery script straight from Google and embed it between

Our final page should like this.

Hope you enjoyed this tutorial. Stay tuned for more.
The following two tabs change content below.

Julian Sula

Principal at 4FX
Founder & Principal of 4FX Media Studios, a Web Design, Web Development, Technology and Creative Marketing Studio. I also draw, paint and dabble in photography.

Latest posts by Julian Sula (see all)

Subscribe to 4FX

Subscribe to our e-mail newsletter to receive updates.