jquery css3 hover effects

78+ Free jQuery CSS3 Image Hover Effects Tutorials

, by , jQuery, CSS3

Those useful and free jQuery css3 image hover effects plugin and tutorials are perfect animation script on images and text. Feel free to download examples code and learn tutorials css jquery image effects. jQuery Mouseover is really very attractive for visitor to see your blog. There are more style of jquery mouse-over effect such as jquery popup, jquery mouseover event, jquery on mouseover, jquery mouseover toolkit.etc. It is really useful tooltip jquery plugin can help you create high quality professional web design.

Some effect on jquery image effect when you take mouse over the button or images the active effects will happen, it similar using flash design. But now we only using query or css to make beautiful action effect and more compatible. With my previous post i also taking about useful example CSS3 as well, it is really important for web designer. Those plugin designed to work across a large range of designs, screens (mobile, tablets, laptops) and devices from the latest UltraBooks to memory constrained mobile devices Zoom you can be sure the largest number of people will be able to see your imagery the way it was intended.

Beautiful Image Hover Effects with jQuery/CSS3

Beautiful Image Hover Effects with jQuerydemo more info / download

Direction-aware 3D hover effect (Concept)

It’s kind of simple, using JS we can easily detect the direction the cursor is coming, then, I am using CSS animations for each case (8 in total).

Direction-aware 3D hover effect (Concept) more info / download

HoverAlls Hover Effects Framework

A super lightweight all in one framework for creating nearly any type of animation without any coding experience.

demo more info / download

Circle CSS3 Hover Effects

CSS3 Hover Effects more info / download

SVG clip-path Hover Effect

Attempt to re-create CJ Gammon’s portfolio grid hover effect using SVG clip-path and CSS Transitions.

svg clip-path hover effectmore info / download

CSS3 Hover Effect using :after Psuedo Element

more info / download

Direction-Aware Hover Effect with CSS3 Transform and jQuery

direction-aware hover effect css3 transformmore info / download

Hover Effect CSS for Bootstrap Gallery

hover effect css bootstrap gallery more info / download

Link Hover Effects

link hover effectsmore info / download

3D Thumb Image Hover Effect

3d thumb image hover effect more info / download

Pure CSS Thumbnail Hover Effect

thumbnail hover effect with css3more info / download

Pure CSS Blur Hover Effect

pure css blur hover effect more info / download

Shape Hover Effect with SVG

In this tutorial we’ll recreate the hover effect as seen on The Christmas Experiments website. We’ll be using SVG for the shape and Snap.svg for animating it on hover.

Shape-Hover-Effect-with-SVGdemo download more info

Border Animation Effect with SVG and CSS

The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS transitions on SVG lines.

Border-Animation-Effect-with-SVG-and-CSSdemo download more info

Swinging hover effect with CSS3 animations

In this tutorial I’m using CSS3 animations and transitions to create a “swinging” hover effect for a “follow me on Twitter” button.

Swinging-hover-effect-with-CSS3-animationsdemo more info / download

3D Hover Effect for Thumbnails and Images

A simple CSS3 3D experiment showing the conversion of an image into a realistic 3D cuboid on hover with a cool shadow effect.

3D-Hover-Effect-for-Thumbnails-and-Imagesdemo more info

Simple yet amazing CSS3 border transition effects

Some crazy effects with Border Transitions. Originally made by ksk1015. Pretty basic CSS3 code, but amazing output.

Simple-yet-amazing-CSS3-border-transition-effectsdemo more info

Simple navigation with hover transitions

simple-navigation-with-hover-transitionsdemo more info

Social Media icons with CSS3 hover effects

Social-Media-icons-with-CSS3-hover-effectsdemo more info / download

Animated Opening Type Effect

A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann’s Open Type project and it’s a very creative way to display and play with letters.

Animated Opening Type Effectdemo more info / download

Responsive Portfolio Gallery with jQuery Tutorial

Responsive Portfolio Gallery with jQuery Tutorialdemo tutorial

Examples of Pseudo-Elements Hover Animations and Transitions

Hover-Animations-and-Transitionsdemo more info / download

Mouseover Effect Using Parallax Style

Mouseover Effect Using Parallax Styledemo tutorial

CSS3 Hover Effect Tutorial with Image Circle

CSS3-Hover-Effect-Image-Circledemo tutorial

CSS3 Hover Effects with Websymbols Tutorial

CSS3 Hover Effects with Websymbols Tutorialdemo tutorial

CSS3 Hover Effects Style Restaurant Menus

CSS3 Hover Effects Style Restaurant Menusdemo tutorial

Icon Hover Effects

Some simple icon hover effects with you. The idea is to create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements.Icon Hover Effectsdemo more info / download

CSS Powered Buttons with Hover Tooltips

Here is another social media buttons I did earlier today, you can add them to you next project, I’m only using social media button as an example, you can pretty much use them for any purposes. From the image you probably noticed the tool tip effect, check out the demo to see the button in action.

CSS Powered Buttons with Hover Tooltipsdemo more info / download

Caption Hover Effects

Stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button.

Caption-Hover-Effectsdemo more info / download

Creative Button Styles Effect

This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others

Creative Button Styles Effectdemo more info / download

Original Hover Effects

We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Original Hover Effectsdemo more info / download

CSS3 Hover Effectswith CSS3 Transitions

This time I will show you other five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops.

CSS3-Hover-Effectswith-CSS3-Transitionsdemo more info / download

Tiles with animated :hover

Tiles with animated :hoverdemo more info

Follow the kitty

Simple effect for roll over on grids, where the content slides based on the previous position. Follow the kittydemo more info / download

Text Revel on Hover: Corner Triangle Slide Overlay

I’m trying to come up with ideas for my new site’s homepage and “mem”. Just testing out another hover technique. -David Leininger

Text Revel on Hover Corner Triangle Slide Overlaydemo more info / download

Logo with Slim and SCSS

Hover and hold this minimalistic logo.

Logo with Slim and SCSSdemo more info

CSS Button Rollover – growing border

Button with border expands on rollover

CSS Button Rollover - growing borderdemo more info

CSS3 Menu hover effects

A collection of hover effects for menus, using CSS3 transitions.

CSS3 Menu hover effectsmore info / download

FLAG OF Egypt

FLAG OF Egyptdemo more info

Profile CSS Hover Effect

Profile CSS Hover Effectdemo more info

CSS3 rotate on hover

This example shows how to use CSS3 to enable rotate 2D or 3D for all main browsers (IE/Chrome/Mozilla/Safari).

CSS3 rotate on hoverdemo more info

Multiple Style Link Effects

In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation.

Multiple Style Link Effectsdemo more info / download

Grid Navigation Effects with jQuery

In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect.

Grid Navigation Effects with jQuerydemo more info / download

Diagonal slide

Sliding an image overlay with a diagonal side.

Diagonal slidedemo more info

Blog Post/Image Hover Effects

Nice little effect on hover for a blog post, image, etc. Text preview is limited to 3 lines with a read more button. Date or Author stamp in the bottom right. Includes: top, left, bottom, and right effects, diagonals from each corner. Distant future: direction-aware hover, serves the right effect based on the mouse position when entering the target area.

Blog Post Image Hover Effectsdemo more info

Hover Box CSS demo

A small demo of creating a hover effect over a box using CSS.

hover-box-css-demodemo more info

CSS3 Lightbox

CSS3 Lightboxdemo more info / download

Creating a Mouseover Fade Effect with jQuery

It effect on color image when mouseover from unclear transparency to clear transparency.

demo tutorial

Simple jQuery Hover Effects

Simple jQuery Hover Effectsdemo  download

Hover Zoom Effect With jQuery and CSS

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.

Hover Zoom Effect With jQuery and CSSdemo tutorial

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.

Greyscale Hover Effect with CSS & jQuerydemo download

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:

Realistic Hover Effect With jQuerydemo download

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

Zoom image on mouseover using jQuerydemo Download

Sliding Boxes and Captions 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.

Sliding Boxes and Captions with jQuerydemo download

Another Beautiful Thumbnail Hover Effect : Using Mootools

On getting such a good response about the javascript effect I am again presenting a different thumbnail presentation.

Another Beautiful Thumbnail Hover Effectdemo download

jQuery Thumbnail with Zooming Image and Fading Caption

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.

jQuery Thumbnail with Zooming Image and Fading Captiondemo download tutorial

jQuery Horizontal Tooltips Menu Tutorials

It is animation is brilliant

jQuery Horizontal Tooltips Menu Tutorialsdemo download

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.

Easiest Mouseover Image Preview Using jQuerydemo download

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.

Build a Better Tooltip On Mouseover with jQuerydemo more info / download

jQuery Hover Image ToolTips

It displays a tooltip image when user hover on the thumbnail with fadein and out effect. it’s a useful script for your website.

jQuery Hover Image ToolTipsdemo download

jQuery and CSS3 Simple Hover Tooltip

 jQuery and CSS3 Simple Hover Tooltipdemo download

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.

jQuery Roll Over a link in the Paragraphsdemo download

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.

Pretty Lightweight Roll Over Tooltips Plugindemo download

jFade – jQuery Hover Effect

jFade - jQuery Hover Effectdemo more info / download

jQuery CSS3 Image Hover Effects

jQuery CSS3 Image Hover Effects more info / download

Show Image in Placeholder/Target Box – jQuery

Show in Place Holder plug-in is developed to show an image to place holder / target box. Plug-in can be used to showcase image portfolios, product images, software screenshots or any dam thing that you want to display to place holder / target box by clicking / hovering image thumbs or anchor links.

Show Image in Placeholder Target Box - jQuerydemo more info / download

ZoomFolio – jQuery Portfolio Plugin

DZS ZoomFolio is the ultimate plugin for displaying your creative portfolio to your clients and that’s not all. You can use it to show the recent posts from your blog or a gallery from your vacation. The possibilities are endless.

ZoomFolio - jQuery Portfolio Plugindemo more info / download

Mate Hover | jQuery Plugin

Mate Hover – is a jQuery plugin for image hover animations. You can change the appearance of pop-up elements. You can embed your icons, text etc.

Mate-Hover--jQuery-Plugindemo more info / download

Zalki Hover Image – Plugin jQuery

Zalki Hover Img – is a jQuery plugin for image hover animations. Cross browser even IE 7 (even opacity).Easy to use and customize. Supports thirty animation effects from jQuery Easing. No need to adjust the size of the container. The plugin will determine the size of your photos and will automatically adjust the settings, even if on the same page there are photos of various sizes.You can disable this function. You can change the appearance of pop-up elements. You can embed your icons, you can adjust the speed of the animation, you can change the color, shape, size …

Zalki Hover Image - Plugin jQuerydemo more info / download

HoverEx – jQuery image hover animation plugin

HoverEx is a jQuery plugin for image hover animations.It contains over 36 animations and prepared 18 hover animation templates.It also support for image zoom and slider effect.You can use it to create unique animated effects effortlessly without any knowledge of jQuery.Just make the needs html markup,it will wokr well for you.

HoverExdemo more info / download

jQuery Giga Image Viewer – animated zoom and pan

Giga image viewer displays very large images without loading the whole image, giga viewer loads only needed fragment of the big image divided into small pieces (256×256 px).

jQuery Giga Image Viewer - animated zoom and pandemo more info / download

Zoome – jQuery Image Zoom Effect Plugin

Zoome is a jQuery plugin to help you zoom images with hover effect(grayscale,blur,transparent) and you can zoom-in or zoom-out use mousewheel

Zoome - jQuery Image Zoom Effect Plugindemo more info / download

jQuery Wheel Menu

Wheel Menu hover effects is a small jQuery plugin that will add a fully customisable Path-like wheel menu button to your website Created by Pete R., Founder of BucketListly

jQuery-Wheel-Menu-Hover-medemo download

Pieces – Javascript Image Effects

Pieces allows you to split an image into tiles and animate them with amazing effects. It comes with 300 ready-to-use animations and with a tool that let you create your animation packs. You can use it both with javascript and html markup. With Pieces you can control tiles dimension, speed, stagger, so on. And it’s responsive and SEO friendly. Pieces takes advantage of TweenMax and the flexibility of jQuery.

 Pieces-Javascript-Image-Effectsdemo more info / download

Hover Effects Pack

This hover pack allows you to add animation effects to images, when it hovered. Also you have ability to add text, that will go over image, and this text also can be animated. In this pack you can find 10 image animation effects and 10 animation effects for text, that goes over image. Also you can combine several text animation effects for one item.

Hover-Effects-Packdemo more info / download

Flipping Card 3D with jQuery, Javascript/CSS3

FlipCard.js implements card filpping animation with jquery, javascript, css3 and html5. It’s fully customizable with either html5 “data-*” attributes or options in javascript. It also supports all modern browsers which including chrome, firefox, safari, opera, and IE7+

Flipping-Card-3D-jQuery-Javascript-CSS3demo more info / download

Zalki Hover Image – Plugin jQuery

Zalki Hover Img – is a jQuery plugin for image hover animations. Cross browser even IE 7 (even opacity).Easy to use and customize. Supports thirty animation effects from jQuery Easing. No need to adjust the size of the container. The plugin will determine the size of your photos and will automatically adjust the settings, even if on the same page there are photos of various sizes.

Zalki-Hover-Image-Plugin-jQuerydemo more info / download

Flipping Cards 3D with jQuery/CSS3

Collection of Flips and effects of cards using CSS3 3D and jQuery. Easy to implement with your CSS & HTML markup Works in all modern browsers (Google Chrome, Safari & Firefox)

Flipping-Cards-3D-with-jQuery-CSS3demo more info / download

Related

29+ Free Responsive Navigation Menu Plugins & Tutorials

23+ PHP jQuery CSS Poll Vote & Survey Code Script

90+ Free Responsive jQuery Image Slider & Slideshow Download

86+ Useful jQuery CSS3 Loading & Progress Bar Tutorials

45 Free CSS jQuery Drop Down Menu Plugins & Tutorial

Written by

Graham Bill is a professional web designer and developer for both WordPress, Joomla and platform for eCommerce websites.

Feedback 2 Leave a comment

Leave a Reply

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