Best jQuery Image Hover Effect Plugins & Tutorials with Demo

    Smoothproducts : jQuery Product Viewer Script

    Smoothproducts : jQuery Product Viewer Script

    A simple, lightweight and responsive product image viewer using jQuery.

    Features:

    • Animates to different image heights (see fourth item in demo)
    • Click or tap to zoom image
    • Pan zoomed image with mouse hover on desktop
    • Pan zoomed image with gyroscope on mobile devices
    • Entire element is responsive.
    • Indicator for thumbnail currently open

    30 Photo Animations with JavaScript

    30 Photo Animations with JavaScript

    All animations and styles can be combined to create a unique experience for your image galleries.Use the Fig Configurator to quickly generate Fig HTML snippets ready to be copy and pasted to your website.

    The package contains the original source files so if you’re a webdeveloper you can tweak the library to your own liking.

    Animation Effects :

    • 7 load animations. Animate a photo in to view in six different ways, pick from zooming in or out, fading, or rotating in various directions.
    • 8 hover animations. Bring a certain area of the photo in to focus on hover or move the photo around when the user interacts with it.
    • 9 caption animations. Slide, fade or push the caption into view from various directions.
    • 6 text animations. Animate the caption text into view via fading, sliding or stacking.

    brandsBox : Logos Slider jQuery Plugin

    brandsBox : Logos Slider jQuery Plugin

    Logos slider jQuery plugin.

    Features:

    • Responsive
    • Configurable Grid
    • Hardware, CSS3 Transitions
    • 6 Smooth Sliding Transitions
    • Animations Speed Control
    • Hover Effects
    • 6 Color Modes for Logos
    • Logos Opacity Control
    • Sliding Modes
    • XML / JS Items Management
    • Major Browsers Support

    mightySlider : jQuery Responsive Slider

    mightySlider : jQuery Responsive Slider

    mightySlider is a jQuery plugin for creating advanced one-directional slider with item based navigation support.

    It can be used as a simple image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even presentation. This is achieved by a powerful & developer friendly API that provides a bunch of very useful methods giving you control over everything.

    Features:

    • Responsive design.
    • Animated HTML captions with customizable effects.
    • Easy installation in your Website.
    • Unlimited Slides.
    • Unlimited Caption Layers.
    • Unlimited Caption Effects.
    • Native browser fullscreen support.
    • Cross browser, supports Chrome, FireFox, Safari, Opera and IE7+.
    • Device friendly, works in iPhone, iPad, Android Devices and Windows Phone.
    • Highly User Interface Design.
    • Fully customizable, it’s possible to customize or redesign all parts of mightySlider.
    • Search engine optimized (SEO).
    • YouTube and Vimeo videos are supported.
    • Super smooth hardware accelerated CSS3 transitions for supported touch devices.
    • Smart lazy loading – loads nearby images in background, so users don’t need to wait each time and images are available instantly.
    • Simple clean & valid markup.
    • Deep linking – link to specific slide from URL.
    • Adjustable speed, transition and easing for each caption or slide.
    • Auto cycling with optional pause on hover.
    • Thumbnails, Tabs or bullets for navigation.
    • Multiple sliders allowed on one page.
    • Keyboard support.
    • Touch support.
    • Mouse support: (Click, Wheel).

    jQuery Multi Purpose Media Boxes – Responsive Grid

    jQuery Multi Purpose Media Boxes - Responsive Grid

    This is a HTML | CSS | JQuery Fully Responsive Portfolio in a pinterest style with a lightbox. It will adapt to the width of its container so you can put it anywhere and you can put anything inside the boxes. Also you don’t have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first load and the number of images to load when you click the “load more images” button.
    The navigation filter bar is generated automatically from the categories you specify to each image.

    Features:

    • Fully responsive grid and lightbox
    • Lazy Load Feature
    • The Lightbox Support images and iframes of any dimensions and it will keep the right proportions
    • The filter navigation bar is generated automatically from the categories you specify to each thumbnail
    • Set the number of images to load at start and when you click the “load more images” button
    • Support thumbnails for the grid only to the images you want to improve performance
    • Fully Responsive Grid and Lightbox
    • Full width, the grid will adapt to the 100% of its container if you set the width of each column to ‘auto’
    • You can specify a static width for each column or specify number of columns
    • When specifying the number of columns you can set the minimum width for each column
    • CSS3 Effects
    • Direction aware hover effect
    • Lightbox with slideshow (play, pause, auto-play)
    • Easy implementation
    • Compatible with Twitter Bootstrap

    Create a Pentagon Hover Effect with CSS3 and jQuery

    Create a Pentagon Hover Effect with CSS3 and jQuery

    This is a new series that will focus on cool web elements on the web. My goal is to try and replicate these sleek elements using a combination of HTML, Javascript and CSS3 and hopefully teach something along the way. It’s a portfolio site that implements a cool pentagon hover effect for displaying his work. It smoothly meshes together a rotate effect with a slight nudge right to the image along with a colorization of the image. Note: This is using CSS3 Transitions which is still not completely standard and browser compatibility may be limited.

     

    Strapslide : jQuery Responsive Bootstrap Slider Plugin

    Strapslide : jQuery Responsive Bootstrap Slider Plugin

    Strapslide is the ultimate premium Bootstrap Slider Plugin offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. Even more important, it is fully responsive and mobile optimized and can take on any dimensions.

    Features:

    • jQuery 1.7 – jQuery 2.x Supported
    • Based on Bootstrap
    • CSS3 Transition library
    • Touch Enabled
    • Responsive
    • Pause on Hover
    • Dynamic Pagination
    • Keyboard Navigation
    • HTML5 Support to play self hosted videos
    • Animation of each Caption element
    • Powerful CSS Transitions with jQuery FallBack
    • Adapts to Bootstrap spans
    • Set Fullscreen YouTube and Vimeo Videos

    Narsis Cover : jQuery CSS3 Image Hover Animation Effect

    Narsis Cover : jQuery CSS3 Image Hover Animation Effect

    Narsis cover is highly customizable CSS3 animation effects for image hover.These Animations is carefully designed with attention to the details. Your visitors will love theme.

    Features:

    • 50 Animation Effect
    • 13 Color Schemes
    • We use FontAwesome for icons so you can use more than 360 icons for your menu.
    • All HTML5, CSS3 and JavaScript codes are fully validated and cleaned.
    • Cross-browser compatible, IE7 included.
    • Fully Customizable

    CSS3 Creative Link Effects

    CSS3 Creative Link Effects

    Today we’d like to share some experimental and creative link effects with you. The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation.

    BloxHover : jQuery Image Hover Effects

    BloxHover : jQuery Image Hover Effects

    BloxHover is a simple jQuery plugin that animates overlay on images in 10 different effects. You can put any HTML content in the overlay. It’s structure is simple and it’s very flexible. The minified version of the plugin is 10kb. There are two types of effects – ones that ‘show’ the overlay with content on hover and the ones which ‘reveal’ the image, by fading out the overlay on hover.