jQuery Image Hover Effect Plugin & Tutorials with Example

whichTriangle.js : jQuery plugin that Divide an element into four Triangles

whichTriangle.js : jQuery plugin that Divide an element into four Triangles

A small jQuery plugin that helps you divide an element into four triangles and test co-ordinates on them.It helps you add direction sensitivity to all the elements it is called on.

jQuery Multi Level Flip Out Cards

jQuery Multi Level Flip Out Cards

Create a dynamic multi level flip out cards with jQuery.Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. I have not tested this on IE.

jQuery Shuffle Images Plugin

jQuery Shuffle Images Plugin

Shuffle Images let you display and shuffle multiple images by moving cursor around or several other ways to trigger.This plugin is perfect for when you want to save space while allowing users to take a peak at what other images are related to the one displayed. It can also be used to create an interactive animation on multiple static images at once.

jQuery Hover Grid Plugin

jQuery Hover Grid Plugin

A simple, lightweight jQuery plugin for creating a grid of images which when hovered reveals a caption.

showOnHover.js : jQuery Hover effect Plugin

showOnHover.js : jQuery Hover effect Plugin

showOnHover.js is a jQuery plugin for create a hover effect.

jQuery Hover Direction Plugin

jQuery Hover Direction Plugin

A jQuery plugin to add CSS classes based on direction of mouse entrance or exit of an element.

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.



Best jQuery websites design awards