Direction-aware Gallery Hover Effect With jQuery - SnakeGallery

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

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.