Image Zoom With Parallax & Tilt Effects - Parazoom

File Size: 421 KB
Views Total: 3517
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Image Zoom With Parallax & Tilt Effects - Parazoom

Parazoom is a fancy jQuery plugin that applies smooth, interactive, zooming and panning functionalities on an image when hovering over.

More features:

  • Parallax Tilt Effect on hover.
  • Parallax alternative text.
  • Custom cursor on hover.
  • And much more.

Basic usage:

1. Include the latest version of jQuery library and the minified version of the jQuery Parazoom plugin at the bottom of the webpage.

<script src="" 
<script src="dist/parazoom.min.js"></script>

2. Just call the function parazoom on the image and done.

<img src="example.jpg" alt="jQueryScript.Net">

3. Show the alternative text in the image on hover.

  text: true

4. Replace the image with the large version on hover.

<img src="thumb.jpg" 

5. Apply a Parallax Tilt Effect to the image on hover.

  tilt: true
  tiltXamount: '30'
  tiltYamount: '20'
  overflow: 'visible'

6. Customize the cursor when you hover over the image.

  customCursorIcon: 'cursor.svg',
  customCursorSize: '100px'

7. All default configuration options.


  // scale level
  scale: '1.2',

  // transition options
  transitionTime: '0.3s',
  transitionTimeLeave: '1s',

  // opacity options
  opacity: '1',
  opacityHover: '1',

  // or 'visible'
  overflow: 'hidden',

  // cursor options
  cursor: 'default',
  customCursorIcon: '',
  customCursorSize: '20px',

  // tilt options
  tilt: false,
  tiltXamount: 10,
  tiltYamount: 10,

  // alt text options
  text: false,
  textClass: false,
  textPosition: 'middle',
  textAlignment: 'center',
  textXParallax: 10,
  textYParallax: 10,
  textOpacity: 0,
  textOpacityHover: 1

8. You can also apply the options via data-prz-OPTIONNAME in case you have multiple image on the page.

<img src="example.jpg"



  • Bugfix

This awesome jQuery plugin is developed by olivier3lanc. For more Advanced Usages, please check the demo page or visit the official website.