jQuery Image Hover Effect Plugin & Tutorials with Example

WP ThumbFx – Responsive jQuery Thumbnail Effects

WP ThumbFx - Responsive jQuery Thumbnail Effects

Enrich your website experience with WPThumbFx, a WordPress jQuery animation plugin that brings your images and content in your articles to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops.

CSS3 Simple Stack Effects

CSS3 Simple Stack Effects

Today we’d like to share some inspiration for simple stack effects with you. You have certainly seen these kind of effects, mostly used in image galleries, but also on single items on a page: one item is shown initially and then, with some trigger, more items are revealed, normally as decoration. One can imagine a couple of triggers for these effects: item hover, on load, on scroll and on click effects. When using some subtle, but creative moves, we can make some interesting effects that elevate a static design.

50mm : Full Screen Portfolio jQuery WordPress Plugin

50mm : Full Screen Portfolio jQuery Wordpress Plugin

50mm Portfolio, a WordPress plugin that shows your portfolio in an interactive way. You can display portfolio by category, choose if single is FULL SCREEN or regular. Additionally, the plugin supports: Custom image size (percent), Custom link, Video, SoundCloud, Metro UI item, Unlimited colors and much more.

Features:

  • Fully responsive
  • Video support
  • SoundCloud support
  • Custom link support
  • Unlimited colors
  • Smart hover color
  • Initial load number
  • Max Load more number
  • Easy drag and drop admin
  • Custom CSS support
  • Activate/Deactivate FULL SCREEN single page

Creating a Border Animation Effect with SVG and CSS

Creating a Border Animation Effect with SVG and CSS

Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When you hover over one of the white portfolio items in the grid, you will see a subtle animation happening: the grid item becomes transparent and the border lines of each side animate clockwise, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans with some JS. We’ll try a different approach that uses SVG and CSS transitions.

InContent : CSS3 Image Onhover Description effects

InContent : CSS3 Image Onhover Description effects

InContent is a Image content with description building with CSS3 and SASS/LESS.

label.css : Just a simply easy way to label each element

label.css : Just a simply easy way to label each element

label.css is just a simply easy way to label each element you want.Label.css supports both outside and inside positions as the label place. Use the class outside to put the label outside of the element and inside to put it inside. Outside label can goes to top or bottom. Inside mode supports these positions: top, bottom, middle, left and right just adding class with the same class name.

You can add hover effects to your label! Two effects fade and float are available. more effects can be added by you and your creativity!

DYSANIA – jQuery Responsive WordPress Grid Gallery Plugin

DYSANIA - jQuery Responsive Wordpress Grid Gallery Plugin
  • Fully Responsive Layout
  • Valid HTML5 – CSS3 – Jquery
  • Unlimited Galleries and Filters: Unlimited gallery and filter menu can be added to any post or page
  • Easy to use, user friendly admin panel
  • Highly customizable! All colors, fonts, alignments, icons, hover animations can be changed from plugin settings
  • Photo,video and link gallery item types are available
  • 6 different colorbox style
  • 1,2,3,4,5 column layout options
  • Fits all themes
  • Grid combination
  • 4 different thumbnail resolution option
  • Gallery shortcode generator
  • Custom widget
  • And much more…

Boxaroo : jQuery Animated Puch Pack into Lightbox

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

Metro – jQuery WordPress Grid Portfolio

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)

Hover.css : A collection of CSS3 powered Hover effects

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.



Best jQuery websites design awards