Hacks Explained

hover.css makes use of some hacks to improve the appearance of effects. You should be fine to keep these hacks as they are, but it may be possible you don't need them either. A description of each hack follows.

Force Block Level

To make an element "transformable", Hover.css gives the following to all elements it is applied to:

display: inline-block;
vertical-align: middle;

Should you wish to override this behavior, either remove the above CSS from hover.css or change the display property for the element. Be sure to declare the override after the hover.css declarations so the CSS cascade will take effect. Alternatively, if you are using the SASS version of Hover.css, you can remove/comment out the forceBlockLevel() mixin found in scss/_hacks.scss.

For more information about Transformable elements, see the CSS Transforms Module.

Font Smoothing

Update (21st Oct 2016): No longer used due to backface-visibility: hidden; bug in Windows 10 / IE 11. If you'd like to smooth fonts that are used in a Hover.css effect, add -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; to your chosen element.

To improve the appearance of fonts, they are smoothed in various browsers using the following CSS:

-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;

Enable Hardware Acceleration

As many hover.css effects rely on CSS3 transforms, hardware acceleration is enabled using the following:

transform: translateZ(0);

With this line of CSS, hardware acceleration is enabled on many mobile/tablet devices. This will improve the performance of a transition effect, as well as prevent other elements around the one transitioning from moving.

Improve Anti Alias

On many mobile/tablet devices, using transforms can cause a thin line to be drawn around an element. To improve appearance of these elements, a transparent box-shadow is applied using the following CSS:

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

When box-shadow is used as a part of a hover.css effect, this hack is applied as a secondary box-shadow, in the .hvr-border-fade effect for example:

.hvr-border-fade {
  box-shadow: inset 0 0 0 4px #ececec,
              0 0 1px rgba(0, 0, 0, 0);
}