Create Custom Hover Effects On Images - jQuery picBeautifier-3000

picBeautifier-3000 is a jQuery plugin for manipulating images that makes it easier to apply custom hover effects (e.g. overlay, slide, zoom in/out, CSS filters) to images with built-in functions.

How to use it:

1. The plugin requires the latest version of jQuery JavaScript library.

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

2. Load the picBeautifier-3000 plugin's script after jQuery.

<script src="/src/app.js"></script>

3. Insert your images into the figure element.

<figure>
  <img src="1.jpg" alt="Image Alt">
</figure>

<figure>
  <img src="2.jpg" alt="Image Alt">
</figure>

<figure>
  <img src="3.jpg" alt="Image Alt">
</figure>

...

4. Apply the following effects to your images.

// zoom in and zoom out effects
objFunctions.hoverLargeScale('figure', '1.3');
objFunctions.hoverNormalScale('figure', '1.4');

// opacity effects
objFunctions.applyOpacity('figure','.7');
objFunctions.applyColorOpacity('figure', '#7D1935', '.5');

// slide effects
objFunctions.hoverSlide('figure', '1.3', '30');
objFunctions.hoverCardify('figure', '#7D1935');

// CSS filters
objFunctions.applyFilteryHover('figure img:not(.severla)', 'grayscale', '100');
objFunctions.removeFilteryHover('figure .severla', 'grayscale', '100');
objFunctions.applyFilteryHover('figure img:not(.severla)', 'sepia', '100');
objFunctions.removeFilteryHover('figure .severla', 'sepia', '100');

// overlay effect
objFunctions.addOverlay('figure', '100%', '#4A96AD', 'white');

---

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