6 Rollover Effects With JQuery and CSS3

Rollover Effects With JQuery and CSS3

Some Rollover Effects with jQuery and CSS3

Today I will show you some  interesting mouse over effects  using jQuery and CSS3 . The effects of “mouse over”, rollover, if managed well are very attractive for your visitors who will enjoy browsing your site, the user experience will be much better. Here is the list of 6 most impressive jQuery effects with different style.

Note: These effects will only work on browsers that support these functions, so consider updating your browsers if they are obsolete.

Direction-Aware Hover Effect

The first image that you will be flying over will define how the next miniature will interact when flying over it. Several effects are possible: Normal, Delay and Inverse. This system combines the use of jQuery as well as CSS3. An effect that can take all its charm on your Portfolio for example.

Direction-Aware Hover

Demo | Source | GitHub


jQuery popeye is a script using jQuery’s javascript library to generate an advanced image gallery. This script will save you space when you view a series of images and offers your users a simple and easy way to view larger images without losing the playback thread. This system combines the use of jQuery as well than CSS3.

Plus a WordPress plugin is also provided and it’s really a fantastic plugin to put forth your articles.

jQuery popeye

Demo | Source | WordPress Plugin

Fading Magnifying Effect

A nice mouse hover effect in gradient. What is great is that we have the choice to use either with jQuery or in CSS3

Fading Magnifying

Demo | Source

3D Thumbnail Hover Effect

One of my favorites by the proposed effects. The idea is certainly taken from the page navigation of the famous “Google SketchUp Showcase”.
5 Different effects possible at your discretion. Requires jQuery and CSS3 compatible browsers

3D Thumbnail

Demo | Source

Circle Hover Effects

A plugin with rollover effects on very fun circle that is only in CSS. I like this plugin also because the miniatures in round shapes change ordinary rectangles and thus make a rendering more interesting and will be able to sublimate the desired effect, the plugin offers 7 different types of animation according to your desires.

3D Circle
3D Circle

Demo | Source

CSS3 Hover Effects

CSS3 Hover

The last of our list, created in CSS3 and HTML5. Obviously you will have a superb rendering with the latest up-to-date browsers such as Chrome or Firefox.

Related posts