“Hover Pack” Documentation by Horoshilow Boris v1.3


“Hover Pack”

Created: 08/01/2014
By: Horishilow Boris
Email: borisolhor@gmail.com

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Including plugin files
  2. Quick start guide
  3. HTML Code structure description
  4. Hover animation classes
  5. Hover opacity classes
  6. Text animation

A) Including plugin files - top

To use this plugin you must include two files from this plugin - hover_pack.js and hover_pack.css. Also you need to have jQuery plugin included in your code (You must include it before hover_pack.js file).


B) Quick start guide - top

To start use this plugin just include script files (javascript and CSS from hover pack and also jQuery plugin) and copy example code, which you can find in index.html file. After that you can change animation style for image or text, change text itself and so on.


C) HTML code structure description - top

In example code you can find this code structure:

So, there is link tag, image tag and span tag (optional), that can include some text (text must be wrapped in header or paragraph tags).

The anchor tag must have two CSS classes - b-animate-go and class with animation name (list of this classes you can find in hover animation section).

If you want to use some text that will go over hover tile, you must to add span tag with css class b-wrapper. After that you can add text in header and paragraph tags into this tag. Also if you want to use animation and delay effects for your text, you must to add CSS classes to header and paragraph tags. List of this classes you can find in text animation section below.


D) Hover animation classes - top

To add hover effects, you can use css classes, listed below:

b-link-fade

b-link-stroke

b-link-twist

b-link-flip

b-link-flow

b-link-box

b-link-stripe

b-link-apart-horisontal

b-link-apart-vertical

b-link-diagonal


D) Hover opacity classes - top

Also you can add opacity to hover layout by adding listed below classes (this will work with all effects, except twist and flip):

b-opacity-10 - equals css property opacity: 0.1

b-opacity-20 - equals css property opacity: 0.2

b-opacity-30 - equals css property opacity: 0.3

b-opacity-40 - equals css property opacity: 0.4

b-opacity-50 - equals css property opacity: 0.5

b-opacity-60 - equals css property opacity: 0.6

b-opacity-70 - equals css property opacity: 0.7

b-opacity-80 - equals css property opacity: 0.8

b-opacity-90 - equals css property opacity: 0.9


E) Text animation classes - top

For text animation you may use css classes, listed below:

b-from-left

b-from-right

b-from-top

b-from-bottom

b-scale

b-opacity

b-cw-90 - clockwise rotation for 90 degrees

b-cw-180 - clockwise rotation for 180 degrees

b-ccw-90 - counterclockwise rotation for 90 degrees

b-ccw-180 - counterclockwise rotation for 180 degrees

Also you can add delay for each element by adding css classes, listed below:

b-delay03 - delay for 0,3 seconds

b-delay06 - delay for 0,6 seconds

b-delay09 - delay for 0,9 seconds

b-delay12 - delay for 1,2 seconds

b-delay15 - delay for 1,5 seconds

In this example text will be slide from left with delay 0,3 seconds.

Also you can use several effects for one element: