17 Amazing jQuery Rollovers – Examples and Tutorials

This collection helps create eye catching rollovers with ease. Create amazing rollovers with sliding boxes, rolling images, moving text and much more using jQuery.

Create Sliding Boxes and Captions with jQuery

Add stylish animated looks to your websites with these jQuery sliding boxes with captions that slide in content into the boxes on hover.

jQuery Rollover Nav Bar

Here is a simple jquery nav bar with animated rollover effects. The page titles roll up to reveal page descriptions underneath.

Create Amazing Rollover Effect With jQuery And CSS

In this tutorial we are going to create a Flash-like rollover effect with the help of CSS and jQuery.

Rollovers and tooltips with jQuery

Yesterday, I needed a quick setup for doing some rollovers and tooltips. You know, the usual stuff, mouse over an icon changes image and shows a tooltip. I thought about taking advantage of html tags attributes manipulation through jQuery.

jQuery Image Cross Fade Transition

Learn to create Image Rollovers with the most amazing effects in the simplest way.

Easy Image Rollover Script With jQuery

Ease up the image rollover effects using this simple jQuery script.

Sliding login panel with jQuery

Create a login panel that slides up and down at the click of a mouse.

Jquery Image rollover with demo

Create image rollover with jQuery!

JQuery Image Rollover With Fade-In And Background Position

If you like navigational effects such as slowly fading in and out image roll-overs without having to use Flash, then here is a useful technique developed from several Ihave seen on various other sites, though those were for purely square or rectangular images where a colour would overlay another to give a sort of glow effect.

jQuery Tutorial – Create A jQuery Flash Like Menu

I was looking at a flash website last night and saw some nice menu effects. I was pretty sure this was easy to re-create in jQuery, so I started coding, and about 2 or 3 hours later, there it was, a nice little jQuery plugin. I know this will not be useful in most website as it take a huge chunk of space, but it is still pretty cool to know you could use this in a more experimental jQuery website.

Animated Rollover-Opacity with jQuery

I have got to admit, everything is easier with jQuery. I do not mean that as a marketing thing, I mean that as a “everything is friggin easier with jQuery” thing – and that is that. You see online many websites that provide links to network sites, only these links are images, and these images have nice transitions when you rollover them from 50% opaque, to 100% opaque. Remove your cursor, and it transitions back to 50% opaque. So how is that done? Well, I can not answer for any of those guys, but I can tell you that it is extremely easy to do this in jQuery with only a few lines of code.

MagicalHover with jQuery

Create a magical hover effect in jQuery where images pop up in style over the screen as you hover over them.

Create Rollover Effect Over Buttons Using jQuery

Many times we require creating rollover effect over button .Here I have changed the css on hover through jquery.

JQuery Toggle

Hello welcome to another tutorial, today il be showing you how to create a toggle feature using jQuery.

Image map rollover effects using jQuery’s MapHilight plugin

So I want to make a big map of europe that highlights the different countries when you move your mouse over them. Initially I thought this would be really easy using a bit of CSS and :hover . . . . no dice. But to my surprise I found out that it is possible to use an ordinary HTML image map to define some pretty complex shapes, and let’s face it, shapes do not get much more complex than this.

Image Rollover with jQuery

Apply rollover image switch effect to any elements with the src attribute. Rollover image URL is determined by inserting _h before the image extension, and any images which already match this format will not have the effect applied. Pass true to preload images.

jQuery look: Tim Van Damme

Jonathan Diba writes to ask how the effects are achieve on Tim Van Dammes portfolio site, referring to Tims site as one of the most compelling site design he is seen. The two key effects Tim is using are a simplified accordion and a hover effect. It is worth noting that the hover effect only works in WebKit (Safari & Chrome), but I will show you how to create the effect using jQuery too.