jQuery Plugin For Custom Image Overlay Hover Effects - picturehover

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.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/picturehover.js"></script>

2. By default, the plugin auto generates captions from your image's title attribute:

<img src="1.jpg" alt="" title="Hover Effect">

3. Call the function on the top container and done.

$('#container').picturehover()

4. Or use the data-picturehover attribute to initialize the plugin automatically.

<div data-picturehover>
  <img src="1.jpg" alt="" title="Hover Effect">
</div>

5. Adjust the animation speed.

$('#container').picturehover({
  duration:'slow'
})

6. Config the plugin to load captions from your image's alt attribute:

$('#container').picturehover({
  caption:'alt'
})

7. You can also apply the hover effect to any elements not only images.

$('#container').picturehover({
  target:'img',
})

8. Customize the overlay on hover.

$('#container').picturehover({
  fontColor:'#fff',
  textAlign:'center',
  verticalMiddle: true,
  backgroundColor:'rgba(0,0,0,.7)',
  height:'100%'
})

9. Events.

$('#container').picturehover().on('slideInEnd',function(event,data){
  // fired after slide in
})

$('#container').picturehover().on('slideOutEnd',function(event,data){
  // fired after slide out
})

---

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