Configurable Sliding Overlay Plugin With jQuery - boxSlider

The boxSlider jQuery plugin makes use of CSS3 transitions to create a configurable sliding overlay effect over a given container on cursor hover.

How to use it:

1. To use this plugin, add the following JavaScript and CSS files to the html file.

<link rel="stylesheet" href="css/boxSlider.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="js/boxSlider.js"></script>

2. Apply the sliding overlay to the element you specify.

// left to right
// Background color: yellow
// Button text: Click Me
$(".element").leftSlideDefault("yellow", "Click Me"); 

// Up to down
// Background color: blue
// Button text: Read More
$(".element").downSlideDefault("blue", "Read More"); 

// Right to left
// Background color: yellow
// Button text: Click Me
$(".element").rightSlideDefault("yellow", "Click Me"); 

// Down to up
// Background color: blue
// Button text: Read More
$(".element").upSlideDefault("blue", "Read More"); 

---

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