This time I will share jQuery Plugin and tutorial about Create Custom Hover Effects On Images – jQuery picBeautifier-3000, hope it will help you in programming stack.
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.
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"> |
2. Load the picBeautifier-3000 plugin’s script after jQuery.
1 |
<script src="/src/app.js"></script> |
3. Insert your images into the figure element.
02 |
<img src="1.jpg" alt="Image Alt"> |
06 |
<img src="2.jpg" alt="Image Alt"> |
10 |
<img src="3.jpg" alt="Image Alt"> |
4. Apply the following effects to your images.
02 |
objFunctions.hoverLargeScale('figure', '1.3'); |
03 |
objFunctions.hoverNormalScale('figure', '1.4'); |
06 |
objFunctions.applyOpacity('figure','.7'); |
07 |
objFunctions.applyColorOpacity('figure', '#7D1935', '.5'); |
10 |
objFunctions.hoverSlide('figure', '1.3', '30'); |
11 |
objFunctions.hoverCardify('figure', '#7D1935'); |
14 |
objFunctions.applyFilteryHover('figure img:not(.severla)', 'grayscale', '100'); |
15 |
objFunctions.removeFilteryHover('figure .severla', 'grayscale', '100'); |
16 |
objFunctions.applyFilteryHover('figure img:not(.severla)', 'sepia', '100'); |
17 |
objFunctions.removeFilteryHover('figure .severla', 'sepia', '100'); |
20 |
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.
