Hover Caption (HCaption.js)

Markup example

This example uses all default settings.

      <a href="#myToggle" class="panel">
        <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" />
      </a>
      <div id="myToggle" class="cap-overlay hide">
        <h5>Cupcakes</h5>
        <div class="content">
          Name: cupcakes.png<br />
          Photography: Ryun Shofner<br />
          <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> 
          <a href="javascript:void(0)" class="button small"><i class="icon-remove"></i> Delete</a>
        </div>
      </div>
    

Fade Effect

This example demonstrates the fade effect setting.

      $(selector).hcaptions({
        effect: "fade"
      });
    

      cap-effect="fade"
    

Slide direction: left

This example demonstrates the slide effect.

      $(selector).hcaptions({
        effect: "slide",
        direction: "left"
      });
    

      cap-effect="slide"
      cap-direction="left"
    

Slide direction: right

This example demonstrates the slide effect.

      $(selector).hcaptions({
        effect: "slide",
        direction: "right"
      });
    

      cap-effect="slide"
      cap-direction="right"
    

Slide direction: top

This example demonstrates the slide effect.

      $(selector).hcaptions({
        effect: "slide",
        direction: "top"
      });
    

      cap-effect="slide"
      cap-direction="top"
    

Slide direction: bottom

This example demonstrates the slide effect.

      $(selector).hcaptions({
        effect: "slide",
        direction: "bottom"
      });
    

      cap-effect="slide"
      cap-direction="bottom"
    

Slide speed: 1000

This example demonstrates the animation speed.

      $(selector).hcaptions({
        effect: "slide",
        speed: "1000"
      });
    

      cap-effect="slide"
      cap-speed="1000"
    

Slide speed: 100

This example demonstrates the animation speed.

      $(selector).hcaptions({
        effect: "slide",
        speed: "100"
      });
    

      cap-effect="slide"
      cap-speed="100"
    

© 2013 HumboldtWeb.com, Inc. All rights reserved.