Collection of free jQuery image effect examples from Codepen and GitHub.

Author

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Photostacks

A picture gallery inspired by a stack of photographs. Designed to be used as part of editorial/long-form writing as an alternative to a slideshow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Goran Vrban

Made with

  • HTML / CSS / JS

About a code

Image Hover Effect with CSS Filter

Image transforms with CSS filter and interacts on mouseover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS) / JS

About a code

Split Image in Tiles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: dat.gui.js

Author

  • Littlesnippets.net

Made with

  • HTML / CSS / JS

About a code

#1577 - Image Hover

Image with title and subtitle on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • LittleSnippets.net

Made with

  • HTML / CSS / JS

About a code

#1573 - Image Hover

Image with button on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Littlesnippets.net

Made with

  • HTML / CSS / JS

About a code

#1566 - Image Hover

Rounded images with icon on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mathias Madsen Stav

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

IOS 10 Style Shadows

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • jim

Made with

  • HTML / CSS / JS

About a code

GSAP Image Tilt Effect on Hover with Image Layers

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Author

  • Littlesnippets.net

Made with

  • HTML / CSS / JS

About a code

#1477 - Image Hover

Image and title with caption on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Littlesnippets.net

Made with

  • HTML / CSS / JS

About a code

#1325 - Image Hover

Image with slow pan right on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Bergability

Made with

  • HTML / CSS / JS

About a code

Tracking Image Hover Effect

Mouse hover effect that tracks the users mouse and moves the image along with it.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -