Create Custom Hover Effects On Images - jQuery picBeautifier-3000

File Size: 53.6 KB
Views Total: 3950
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 

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.