Best jQuery Image Hover Effect Plugins & Tutorials with Demo

    Boxaroo : jQuery Animated Puch Pack into Lightbox

    February 9, 2014 | Animation, CSS2 / CSS3.0, Plugins, Popup Window, Premium
    Boxaroo : jQuery Animated Puch Pack into Lightbox

    Boxaroo packs a punch into the Lightbox – providing full customization control over the environment while catering to both beginners and developers. Packed to the gills with nearly 400MB of optimized graphics (66 Envato Marketplace Items) and over 170 optional settings – Boxaroo is possibly the most flexible and customizable Lightbox solution yet.

    Features:

    • 66 Envato Marketplace Items 
    • 170 Customization Settings
    • Minified Production + Source Code
    • 6 pre-built Skins
    • 10 CSS3 Preloaders with GIF Fallbacks
    • 800 Premium Backgrounds
    • 100+ Navigation Button Graphics
    • 100+ Seamless Tiles
    • Customizable Thumbnail Hover Effects
    • Comprehensive and Interactive Documentation
    Read More Demo

    Metro – jQuery WordPress Grid Portfolio

    January 24, 2014 | Gallery, Plugins, Premium, Wordpress
    Metro - jQuery WordPress Grid Portfolio

    METRO – WordPress Grid Portfolio, a WordPress Plugin that shows your portfolio in an interactive way. You can display a single gallery, all galleries within a category and all galleries from multiple categories. Additionally, the plugin supports: Custom image size (percent), Custom link, Video, SoundCloud, Metro UI item, Unlimited colors and much more.

    Features:

    • Fully responsive
    • Load more (unlimited items)
    • Video support
    • SoundCloud support
    • Custom link
    • Metro Item
    • Unlimited colors
    • Smart hover color
    • Initial load number
    • Max Load more number
    • Easy drag and drop admin
    • Filterable portfolio
    • Display: One gallery, One Category, Multiple categories
    • Key navigation for the lightbox (Left/Right arrow and Esc)
    Read More Demo

    Hover.css : A collection of CSS3 powered Hover effects

    January 11, 2014 | CSS2 / CSS3.0
    Hover.css : A collection of CSS3 powered Hover effects

    A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

    Read More Demo

    Sinister – Pure CSS Image Hover Effects

    January 10, 2014 | Animation, CSS2 / CSS3.0, Premium
    Sinister - Pure CSS Image Hover Effects

    Sinister is More than 45 Pure CSS Image Hover Effects Which is Suitable for a Wide Variety of Websites and Have Very Easy Installation.With Install this CSS File You Will be able add Variety of Image hover effects to your images.

    Features:

    • Pure CSS
    • Without JavaScript or jQuery
    • More than 45 Hover Effects
    • More than 15 Button Transition Effects
    • More than 15 Overlay Transition Effects
    Read More Demo

    Shape Hover Effect with SVG

    January 8, 2014 | SVG Tutorial
    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.

    The idea is to create a SVG with one path that represents the shape background for some caption and to morph that path into another one on hover. There are many creative possibilities and today we’ll create three different examples. The nice thing of utilizing SVG is that we can adjust the shape size to their parent container’s size and make everything fluid.

    Read More Demo

    CSS3 Hover Effects with CSS3 Transitions

    January 4, 2014 | CSS2 / CSS3.0
    CSS3 Hover Effects with 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.

    In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects.
    Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

    Read More Demo

    jQuery Amazing Portfolio – WordPress Plugin

    December 18, 2013 | CSS2 / CSS3.0, Gallery, Plugins, Premium, Wordpress
    jQuery Amazing Portfolio - WordPress Plugin

    Features:

    • Create Fully responsive portfolios
    • Control the number of columns for various screen resolutions and widths.
    • 25 unique and creative theme effects (More coming soon)
    • Unlimited colors and style.
    • Manage Unlimited Portfolios.
    • Control cross browsers CSS effects of various elements like borders, backgrounds, fonts, paddings, margins, alignments, colors, shadow etc.
    • Based on powerful Mixitup plugin
    • Images, video and audio support for portfolios
    • Fully customizable CSS and Style settings. Possible to customize or redesign all parts of portfolio from panel.
    • Responsive lightbox supports any media type like audio, video, external video, images, embeded codes and HTML codes.
    • Auto detect media in lightbox and keyboard support navigation
    • Control animation easing, animation effects and animation speed
    • Filterable portfolio with controllable animations.
    • 25 brilliant inbuilt demos
    • Create Audio file or Video file portfolio using default browser players
    Read More Demo

    jQuery Sliding Pop Hover Plugin

    December 18, 2013 | Plugins
    jQuery Sliding Pop Hover Plugin

    jQuery plugin Sliding a div over other div on mouse hover.Move the cursor arround the image bellow to make other side of the display item appear which is hidden with the effect of sliding that is where the power of Sliding Pop Hover plays role. The Sliding Pop Hover makes the other part which is hidden slide into the picture slowly when the cursor is on top of the view and plays reverse role when cursor leaves the view.

    Read More Demo

    Image Caption Hover Animation with CSS3 Transitions & Transforms

    November 30, 2013 | Animation, CSS2 / CSS3.0
    Image Caption Hover Animation with CSS3 Transitions & Transforms

    This is an example of caption animation while hovering on images, using CSS3 transitions and transform rules. There is no Javascript used so it will work on modern browsers where CSS3 animations are supported. Please check the sourcecode of demo page to understand how the animation is working.

    Read More Demo

    Socio Motion : jQuery Photo Face Wall

    November 22, 2013 | Gallery, Other API, Plugins, Premium
    Socio Motion : jQuery Photo Face Wall

    A first of its kind plugin to create a dynamic and responsive photo thumbnail wall out of your Facebook friends. Share content with friends just on a click of a tile. Use tons of animation effects to switch between tiles. Configure the number of rows, columns, width, height and everything else you like. The plugin is built 100% using jQuery & love and works everywhere.

    Features:

    • Responsive by design
    • Share a link to friend just with 1 click.
    • Simplest Facebook authentication.
    • Control the number of photos to display.
    • Cool effects.
    • Animation speed control.
    • Parallel tile movement
    • .Hover to move.
    Read More Demo