jQuery Plugin For Sliding Box with Image Overlay Effect - Mosaic

Mosaic is an awesome and easy-to-use jQuery plugin that automatically generates sliding boxes with animated image overlay effects. 

Features:

• Slide or fade animation with custom directions
• Preloads images and displays them when page is loaded
• Lightweight (~2kb minified) and easy to implement
• Support all major browsers (IE7/8/9/10, Chrome, Firefox, Safari, Opera, etc)

Related plugins:

• jQuery Plugin For Overlay Instructions For Apps - chardin.js
• jQuery Plugin for App Showcase with Grid Overlay
• Animated jQuery Image Caption Overlay Effects Plugin - HCaptions
• Animated Image Overlay Plugin with jQuery - ImageOverlay
• Expanding Overlay Effect with jQuery and CSS3

Basic Usage:

1. Include jQuery library and Mosaic plugin on the html page

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>

2. Include required plugin CSS file on your page

<link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" />

3. The HTML

<div class="mosaic-block fade"> <a href="#" class="mosaic-overlay">
<div class="details">
...
</div>
</a>
<div class="mosaic-backdrop"><img src="1.jpg"/></div>
</div>

4. The javascript

<script type="text/javascript">  

jQuery(function($){

$('.fade').mosaic();

});
    
</script>

5. Options

animation	: 'fade', // fade or slide
speed		: 150, // the speed of animation
opacity		: 1, // for Fade Animation. Accepts any value 0-1 (decimals included)
preload		: 0, // Preload images
anchor_x	: 'left', 
anchor_y	: 'bottom',
hover_x		: '0px', // Horizontal overlay hover positions
hover_y		: '0px', // Vertical overlay hover positions
overlay  	: '.mosaic-overlay',	//Mosaic overlay
backdrop 	: '.mosaic-backdrop'	//Mosaic backdrop

---

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