Best jQuery Image Effects Plugins & Tutorials with Demo

Image Mask Effect with CSS & jQuery

Image Mask Effect with CSS & jQuery

An immersive transition effect powered by image masks and CSS transforms.

Tilt.js : jQuery Parallax Tilt Hover Effect

Tilt.js : jQuery Parallax Tilt Hover Effect

Tilt.js is a tiny request AnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

Object Fit Images : JavaScript Polyfill for Object-fit & Object-position

Object Fit Images : JavaScript Polyfill for Object-fit & Object-position

Polyfill object-fit and object-position on images on IE9, IE10, IE11, Edge, Safari, etc.

Features:

  • Fast and lightweight
  • No additional elements are created or necessary
  • Once set, position is taken care by the browser
  • srcset support
  • You can still access/change src and srcset properties and attributes: img.src = 'other-image.jpg'

Little Fragments: Simple Image Poster Effect with CSS & JavaScript

Little Fragments: Simple Image Poster Effect with CSS & JavaScript

A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path.

The inspiration comes from a poster of the Grand Canyon with a fun distortion-like effect: some pieces of the image are cut out and placed in a different position. The pieces are very small which creates an interesting and creative look. We’ll be showing you today how to create a similar effect with CSS and some JavaScript.

CSSCO : Photographic Filters made with CSS

CSSCO : Photographic Filters made with CSS

CSSCO is a photographic filters made with CSS, inspired by VSCO and CSSgram.

Background Segment Effect with CSS & Anime.js

Background Segment Effect with CSS & Anime.js

Today we’d like to share a little decorative effect with you that we’ve encountered on Filippo Bello’s Portfolio, maybe you’ve seen it. It’s a really neat way to add some jazz to background images. The idea is to replicate boxes from a background with the same background image and make these boxes move in perspective towards the viewer. Adding a fitting shadow and some parallax makes all this look quite interesting. Furthermore, we’re employing anime.js, the easy-to-use JavaScript animation library by Julian Garnier.

Create Simple Image Editor Using jQuery, HTML5 And CSS

Create Simple Image Editor Using jQuery, HTML5 And CSS

In this tutorial we will show you how to create a simple image editor using jQuery, HTML5 and CSS.We use different CSS filter like Grayscale, Blur, Exposure(brightness), Sepia and Opacity to edit the image you can add more effects if you want.

Instagram-style filters in HTML5 Canvas

Instagram-style filters in HTML5 Canvas

mgGlitch.js : jQuery helper for Glitch

mgGlitch.js : jQuery helper for Glitch

A little jquery helper to glitch everything.

  • first element become a static background
  • next element with glitch property and lower interval
  • next element with glitch property, higher interval and scale options
  • next element with glitch property, higher interval, scale options and blend mode apply

Simple Interactive Points Effect with SVG

Simple Interactive Points Effect with SVG

Today we’d like to share a simple hover/click effect for images with you. The main idea is to show a map or a base image with some points of interest (POS) and when we come close to one of these points and hover, an image starts to fade in. When clicking on the POS indicator, a content layer is shown with some more information on that point; the background image becomes completely opaque. This concept could be fitting for some kind of map assisted story telling, like a travel piece or similar.



Best jQuery websites design awards