40 jQuery Mouseover / Hover Effect Plugins and Tutorials

  8 Comments

jQuery Mouseover or Mouse Hover image effects plugins can create attractiveness on your website. There are many mouse events like moseover, mouseclick, mouse drag out and drag in ah that reminds of Flash. jQuery is being used to create awesome effects and interactivity on ones blog or website like jQuery popup, jQuery hover, Tooltips, Peel etc. These plugins/tutorials can help you to create eye catching web designs for your self and for your clients.

We have gathered some Free jQuery mouseover / hover plugins and tutorials for you, so you don’t have to. This collection contains from 3d thumbnail hover effect, page peel effect to jQuery mouseover blur effect. You will notice that almost all of these examples contains CSS3 stylizing. If you know a little bit of jQuery and CSS3, wonders can happen.

Enjoy these awesome examples and stay tuned for our next post.

3D Thumbnail Hover Effects

Demo | Download

3d-hover-effect

Page peel Hover effect using jQuery

Demo | Download
This is a jQuery plugin for adding a “peelback” or “peelaway” ad to a page.
simple-page-peel

Awesome jQuery image Swish Zoom Hover Effect

With this plugin you can add a zoom style effect to your images on hover, also you can add an overlay to it
Demo | Download
awesome-swish-zoom-hover-effect

Featured Image Zoomer Hover Effect v1.5.1

This script lets you view a magnified portion of any image upon moving your mouse Hover it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel.  It’s great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.
More Info
featured-image-zoomer-jquery

SLIDEUP BOXES Hover Effect

This is using CSS3 transitions and transforms, so browser compatibility should be something like: Safari 3+, Firefox 4+, Opera 10+, Chrome Whatever+
More Info
6-css3-slideup-box

Hover Zoom Effect

The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails. As always, you can check out a demo or grab the source right here if you don’t want to read the entire tutorial.
Demo | Download
Hover-Zoom-Demo

Display Detail Over Image With Hover

Here we have four images tags and their title attribute working as the tooltip. This kind of simple syntax will also show the browser’s standard tooltips even though JavaScript is not enabled. This whole setup can be enabled with one JavaScript one-liner.
Demo
08-detail-jquery-mouseover

AnythingZoomer jQuery Plugin

You have a small area. You mouse hover over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there.
Demo

AnythingZoomer-1

Creating a MouseOver Hover Fade Effect with jQuery

It effect on color image when mouseover from unclear transparency to clear transparency.
Demo
10-fade-efffect-jquery-mouseover

Pretty Hover Effects with CSS and jQuery

Demo | Download
This article will show you how to create pretty hover effects for your images using jQuery and CSS. This can come useful especially if you already have hundreds of images that you want to apply this effect on.
12-pretty-hover-effects-css-jquery

ImageLens

Use this jQuery plug-in to add lens style zooming effect to an image hover effect
Demo

imagelens

jQuery Image Slide On Hover Effect

This is a simple technique to animate an image when hovering using jQuery animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image.
Demo
15-jquery-image-slide-on-hover-effect

Image Cross Fade Hover Effect

Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript.
Demo
5-image-cross-fade

Hover Fading Effect Transition with jQuery

Demo
jquery-hover-fading

Greyscale Hover Effect with CSS & jQuery

My solution relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.
Demo | More Info
jquery-greyscale-mousever-effect-jquery-css

Realistic Hover Effect with jQuery

Using jQuery’s animate effect, I experimented with icons that have reflections and others with shadows. Here is a demo with two examples:
Demo | Download
realistic-hover-with-jquery-mouseover-effect

jQuery Cycle plugin

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.
Demo
cycle

Animate a Hover with jQuery

Animate an image while hovering it and show the visitors information while doing that. Sounds simple huh? Well it is, but the effect is nice and can be nice for a portfolio, for example.
Demo
animated-hover-jquery-plugin

Zoom Image on Mouseover Using jQuery

One of my reader asked me how to zoom an image with out a click, simply when mouse is on image. This is not a tough task to do. jQuery provides 2 events mouseover() and mouseout() and as name suggest, these events are executed on mouse moves
More Info

ZOOM IMAGE

Sliding Boxes and Captions with jQuery

Demo | Download
Animate an image while hovering it and show the visitors information while doing that. Sounds simple huh? Well it is, but the effect is nice and can be nice for a portfolio, for example.
4-sliding-boxes

Direction-Aware Hover Effect

How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.
Demo | Download
direction

Another Beautiful Thumbnail Hover Effect

On getting such a good response about the JavaScript effect I am again presenting a different thumbnail presentation.
Demo | Download
7-jquery-mouseover-effect

jQuery Thumbnail with Zooming Image and Fading Caption on hover

I came across quite a lot of CSS gallery websites that using huge thumbnail to showcase beautiful websites. Some of them are just ordinary thumbnail, but a lot of them have javascript animated caption to convey more information to viewers.
Demo | Download
8-jquery-thumbnail-zooming-image

Popup Bubble Hover Effect

Roll the mouse over and out from the download image to see the popup fade in and out of view, while gently gliding upwards.
Demo
16-popup-bubble-mouse-over-jquery

JQUERY HORIZONTAL TOOLTIPS MENU TUTORIALS

It is animation is brilliant
Demo | Download
18-jQuery-Horizontal-Tooltips-Menu

EASIEST MOUSEOVER IMAGE PREVIEW USING JQUERY

It is a rollover image preview. You know, one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail.
Demo | Download
3-Mouseover-Image-Preview-Using-jQuery

BUILD A BETTER TOOLTIP ON MOUSEOVER WITH JQUERY

In this tutorial I’m going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.
Demo | Download
2-Tooltip-On-Mouseover-with-jQuery

TIPTIP JQUERY PLUGIN FOR MOUSEOVER EFFECT

This jquery plugin will adjust itself to be displayed above, below, to the left or to the right of the element with toll tip applied to it, depending on what is necessary to stay within the browser window.
Download
1-TipTip-jQuery-Plugin-for-Mouseover-Effect

JQUERY ANIMATED HOVER TOOLTIP PLUGIN

Mouseover any of the item boxes you see on the page.
Download
9-JQuery-Animated-Hover-Tooltip-Plugin

JQUERY HOVER IMAGE TOOLTIPS

It displays a tooltip image when user hover on the thumbnail with fade-in and out effect. it’s a useful script for your website.
Demo | Download
19-jQuery-Hover-Image-ToolTips

JQUERY AND CSS3 SIMPLE HOVER TOOLTIP

Demo | Download
2-jQuery-and-CSS3-Simple-Hover-Tooltip

JQUERY ROLL OVER A LINK IN THE PARAGRAPHS

Roll over a link in the paragraphs below. This demonstrates how the tool tip will flip horizontally depending upon the space between the tool tip and the right side of the window. Don’t worry the script also accounts for the custom widths.
Demo | Download
20-jQuery-Roll-Over-a-link-in-the-Paragraphs

PRETTY LIGHTWEIGHT ROLL OVER TOOLTIPS PLUGIN

It is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly.
Demo | Download
21-Pretty-Lightweight-Roll-Over-Tooltips-Plugin

jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover.
Demo | Download
jsquare

Image Highlighting and Preview with jQuery

Demo | Download
image-high-light

 

Magnifying glass for image zoom using Jquery and CSS3

magnifying-glass-css3-jquery
More Info

Tutorials:

Item Blur Effect With CSS3 and jQuery

In this tutorial we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that draws the attention to the currently hovered item.

blur-effect-tutorial-hover
Demo | More Info

Create a Unique Contact Form with CSS3 Transitions

In this tutorial we will recreate an effect of a letter sliding out from an envelope on mouse hover.

send-a-message
Tutorial | Demo

Thumbnail Proximity Effect

In this tutorial we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighboring thumbnails proportionally to their distance. We’ll also make a description appear.

thumbnail-proximity-effect
Tutorial | Demo

How To Create A Page Peel Advertisement In WordPress !!

pagepeel

jQuery Tutorials for Designers

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a “write less, do more” Javascript library.
Demo | Tutorial
jquery-how-it-works

Get my updates from +Page or Twitter

8 Comments

  1. oyuncu başvurusu

    January 11, 2013 at 10:27 am

    thank you for shared

  2. shanu

    February 26, 2013 at 2:27 am

    grt wrk… kep it up ………..thks

  3. sagar

    March 4, 2013 at 12:11 pm

    Thanks for sharing!

  4. Ronak

    April 9, 2013 at 9:55 am

    Really nice work…
    Thnxx for sharing the stuff..

  5. right click

    April 19, 2013 at 6:20 am

    It’s awesome effect friends…I never seen this type of collection in any other website…so its all under one roof…

    carry on….Thanks a lot to publish all this effect and demos.

    Have a great day…

  6. Sahil

    May 14, 2013 at 9:19 am

    great work…..nice

  7. pratiksha

    May 17, 2013 at 10:59 am

    out of the box effects….thanx alot this helped me alot

  8. Archana

    December 7, 2013 at 2:49 pm

    I am trying to create a website with images centered and one below the other….so i want to keep sliding the images automatically from bottom to top and repeat. On mouse over on one image i want to stop the sliding and zoom that image. can anyone give an idea how to do it? Thanks in advance!

Leave a Reply

Your email address will not be published. Required fields are marked *