Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out

Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical

Icon Back Icon Forward Icon Down Icon Up Icon Spin Icon Drop Icon Fade Icon Float Away Icon Sink Away Icon Grow Icon Shrink Icon Pulse Icon Pulse Grow Icon Pulse Shrink Icon Push Icon Pop Icon Bounce Icon Rotate Icon Grow Rotate Icon Float Icon Sink Icon Bob Icon Hang Icon Wobble Horizontal Icon Wobble Vertical Icon Buzz Icon Buzz Out

Border Fade Hollow Trim Ripple Out Ripple In Outline Out Outline In Round Corners Underline From Left Underline From Center Underline From Right Reveal Underline Reveal Overline Reveal Overline From Left Overline From Center Overline From Right

Shadow Grow Shadow Float Shadow Glow Shadow Radial Box Shadow Outset Box Shadow Inset

Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left

Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left

Customising Colors

We will have to customize the color you want to use, since it uses the hover for doing the effect. The best way to know what to change is taking a look at the hover.css and see what the class does on :hover.

---

Using FontAwesome with Icon Effects

Hover.css icons are added to elements via the :before pseudo-element.

By default Hover.css puts the icon for you, but you can use a customized icon if you set the element class like this: hvr-icon-forward fa-chevron-left

Examples:

---

A Deeper Look at the CSS (and some Hacks)

All hover.cs effects are given default CSS properties that aren’t directly related to the effect. These default properties give the most desired wide-spread results, but nonetheless you may wish to change them on your own website.

display: inline-block

A display property is often required for an effect to work. By default, hover.css sets all elements to display: inline-block. You may need to change this to display: block or display: inlinedepending on your requirements. If the element you’re applying the effect to already has a display property, then the one applied by the effect can be removed.

transform: translateZ(0)

transform: translateZ(0) is known as a “performance hack”. It is often used with CSS3 transforms to improve the performance of those transforms on mobile and tablet devices.

box-shadow: 0 0 1px rgba(0, 0, 0, 0)

When viewing CSS3 transformed elements on mobile/tablet devices, the edges can sometimes look jagged or a slightly different colour. By applying box-shadow: 0 0 1px rgba(0, 0, 0, 0), an element is given a transparent box shadow, which causes the edges of that element to look smoother.

---

Browser Support

Many hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements. Older browsers still in use today may not fully support effects making use of these technologies.

• Transforms are not supported below Internet Explorer 10
• Transitions and Animations are not supported below Internet Explorer 9
• Psuedo-elements are not supported below Internet Explorer 8

Aside from the above mentioned browsers, hover.css is supported across all major browsers. Please see caniuse.com for full support for many web technologies and test your webpages accordingly.