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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<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">

$('img').parazoom();

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

$('img').parazoom({
  text: true
});

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

<img src="thumb.jpg" 
     data-prz-large-img="large.jpg"
     alt="jQueryScript.Net">

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

$('img').parazoom({
  tilt: true
  tiltXamount: '30'
  tiltYamount: '20'
  overflow: 'visible'
});

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

$('img').parazoom({
  customCursorIcon: 'cursor.svg',
  customCursorSize: '100px'
});

7. All default configuration options.

$('img').parazoom({

  // 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"
     alt="jQueryScript.Net"
     data-prz-transition-time="100ms"
     data-prz-transition-time-leave="3s">

Changelog:

2018-06-12

• Bugfix

---

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