This time I will share jQuery Plugin and tutorial about jQuery Plugin For Custom Image Overlay Hover Effects – picturehover, hope it will help you in programming stack.
picturehover is a very small jQuery plugin used to create customizable image overlay hover effects that have the ability to load captions from any attributes on img
tag such as title
or alt
.
How to use it:
1. Load jQuery library and the jQuery picturehover plugin before the closing body tag of your html document.
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src = "js/picturehover.js" ></ script > |
2. By default, the plugin auto generates captions from your image’s title
attribute:
1 |
< img src = "1.jpg" alt = "" title = "Hover Effect" > |
3. Call the function on the top container and done.
1 |
$( '#container' ).picturehover() |
4. Or use the data-picturehover
attribute to initialize the plugin automatically.
1 |
<div data-picturehover> |
2 |
<img src= "1.jpg" alt= "" title= "Hover Effect" > |
5. Adjust the animation speed.
1 |
$( '#container' ).picturehover({ |
6. Config the plugin to load captions from your image’s alt
attribute:
1 |
$( '#container' ).picturehover({ |
7. You can also apply the hover effect to any elements not only images.
1 |
$( '#container' ).picturehover({ |
8. Customize the overlay on hover.
1 |
$( '#container' ).picturehover({ |
5 |
backgroundColor: 'rgba(0,0,0,.7)' , |
9. Events.
1 |
$( '#container' ).picturehover().on( 'slideInEnd' , function (event,data){ |
5 |
$( '#container' ).picturehover().on( 'slideOutEnd' , function (event,data){ |
This awesome jQuery plugin is developed by HUJINLIANG. For more Advanced Usages, please check the demo page or visit the official website.