Direction-aware Gallery Hover Effect With jQuery - SnakeGallery

File Size: 3.49 KB
Views Total: 8218
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Direction-aware Gallery Hover Effect With jQuery - SnakeGallery

SnakeGallery is a very small jQuery plugin for creating an animated hover overlay for your gallery that slides out from the boundary depending on the direction you enter the image.

How to use it:

1. Load both jQuery library and the jQuery SnakeGallery plugin's script at the end of the html document:

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="snake.min.js">

2. Add captions to your gallery images as this:

<div class="snake">
  <div class="overlay">
    <span class="title">Image Title</span>
    <span class="description">Image Description</span>
  </div>
  <img class="" src="1.jpg">
</div>

<div class="snake">
  <div class="overlay">
    <span class="title">Image Title</span>
    <span class="description">Image Description</span>
  </div>
  <img class="" src="2.jpg">
</div>

<div class="snake">
  <div class="overlay">
    <span class="title">Image Title</span>
    <span class="description">Image Description</span>
  </div>
  <img class="" src="3.jpg">
</div>

3. Initialize the plugin with default options.

$(".snake").snakeify();

4. Set the animation speed in milliseconds.

$(".snake").snakeify({
  speed: 200
});

5. Style the hover overlay in the CSS.

.overlay{
  position: absolute;
  opacity: 0.9;
  text-align: center;
  padding-top: 60px;
  background-color: #ffffff;
}

.overlay .title{
  font-size: 15px;
  font-weight: bold;
  display: block;
  width: 100%;
}

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