jQuery Plugin For Subtle HTML5 / CSS3 Hover Effects - captionHover.js

captionHover.js is a lightweight jQuery plugin used to implement cool CSS3 hover effects (Introduced in this article) on any elements with HTML5 figure and figcaption tags.

How to use it:

1. Download the plugin and add main.css and captionHover.js to your project.

<link href="path/to/main.css" rel="stylesheet">
  ...
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="path/to/captionHover.dev.js"></script>

2. Build the HTML structure using HTML5 figure and figcaption tags like the demo below.

<figure class="demo">
  <img src="bg.jpg">
  <figcaption>
    <div>
      <h2>Caption title</h2>
      <p>More description</p>
    </div>
    <a href="#">View more</a>
  </figcaption>     
</figure>

3. Add the js call before the closing body tag to initiate the plugin with the desired effect.

$('.demo').captionHover({
  fx: 'lily',
});

4. More configuration options.

$('.demo').captionHover({

  // lily, sadie, honey, layla, zoe, oscar
  // marley, ruby, roxy, sophie, romeo
  // dexter, sarah, chico, milo
  fx: 'honey',

  // heading color
  headColor: '#fff',

  // caption color
  captionColor: '#fff',

  // overlay color
  overlay: '#3085a3',

  // px | % | em
  figWidth: '49%',
  
  // px | % | em
  figHeight : '100%',

  // background color of caption
  bgCaption : '#000',

  // icon color
  iconColor : '#fff'

});

---

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