Create Custom Hover Effects On Images - jQuery picBeautifier-3000

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.

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

<script src="" 

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

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

3. Insert your images into the figure element.

  <img src="1.jpg" alt="Image Alt">
  <img src="2.jpg" alt="Image Alt">
  <img src="3.jpg" alt="Image Alt">

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.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.

  • Publication date: 29.03.2018
  • Source