Simplifying CSS3 hover effects

When I started out as a front-end dev, I always had a hard time understanding how CSS3 hover effects worked, so I created this website that will hopefully make them easier to understand.

The source code for this website is available for download, and I highly recommend doing it so you can read it alongside this website.

Current version - 2.0
This is not a CSS library
If you want a CSS3 hover library, check out Ian Lunn's amazing hover.css library. This website is merely an attempt to explain and make CSS3 hover libraries much easier to understand, and possibly implement. However, if you require a quick fix, you can copy and paste my code into your document.

This website is also not a tutorial - I am assuming that you already know the basics of CSS3, or at the very least, have foundation level knowledge of the various CSS properties.

This website will be split into two sections: the first will show effects that can be applied when hovering over text, and the second will show effects that can be applied when hovering over images. Once you've gotten the hang of the various effects, you can mix and match certain effects together to create your very own custom effect!

Part one - hovering over text

In the markup below, the tags and their respective classes are just guidelines for you to follow, you are free to change them to anything you wish to use. 
<div class="hover">
    <span class="hover-color">
        // put your content here
    </span>
</div>
Some of these effects can be applied to images as well, but it is up to you to figure out how! Hover over the titles of the examples below to see the effects in action:

Colour
  • Change colour with the color property
Colour pulse
  • Change colours with the @keyframes rule
Font size
  • Change font size with the font-size property
Background
  • Change background colour with either the background or the background-color property
  • It is also possible to put an image as the background
Border
  • Base element must have the border property defined
  • All border properties can be animated and changed
Glow
  • Use the box-shadow property to make the element itself glow
  • Use the text-shadow property to make the text itself glow
  • All glow properties can be animated and changed
Letter spacing
  • This animation is unique to text
  • Change spacing with the letter-spacing property
  • The margin-left property MUST BE defined and MUST HAVE the same value as the given letter-spacing property - this is so that the text will remain in place instead of shifting to the left after the animation ends
Translate
  • The display property of this element MUST BE set to inline-block
  • Change translation direction through the translateX() or translateY() values, or combine them into one translate() value for more complex effects.
Rotate
  • The display property of this element MUST BE set to inline-block.
  • Change axis of rotation by using either rotateX(), rotateY(), or rotateZ(); the number of rotations can be changed through their values
  • Change origin of rotation with the transform-origin property.
  • Change rotation duration with the transition property
Underline
  • The display property of this element MUST BE set to inline-block
  • Change underline thickness with the height property
  • Change colour with either the background or background-color property
  • Underline direction can be reversed by setting the right property to zero instead of left
Highlight
  • The display property of this element MUST BE set to inline-block
  • The z-index property MUST BE set to -1
  • The height property MUST BE set to 100%
  • Change colour with either the background or background-color property
  • Highlight direction can be reversed by setting the right property to zero instead of left
Text fill
  • The display property of this element MUST BE set to inline-block
  • The position property of this element MUST BE set to relative
  • The overflow property of the :before selector MUST BE set to hidden
  • The white-space property of the :before selector MUST BE set to nowrap
  • The content property of the :before selector MUST CONTAIN THE SAME VALUE as the text in this element
  • This effect will only work in the left to right direction

Part two - hovering over images

In the markup below, the tags and their respective classes are just guidelines for you to follow, you are free to change them to anything you wish to use. 
<div class="box hover-push">
    <img src="#">
    <div class="mask">
        // put your content here
    </div>
</figure>
I've provided various examples in the gallery below, and hovering over them will play the respective effects, as well as telling you how to modify them to suit your puposes. Some of these effects can be used on text too, but it is up to you to figure it out how!

type 1 - push

Change push direction though the translateX() or translateY() values, or combine into translate() for more complex effects

type 2 - slide

Change slide direction though the translateX() or translateY() values, or combine into translate() for more complex effects

type 3 - fade

Control fade timing with the transition-timing property, or combine it into the transition property

type 4 - old-school spin

Change number of rotations through the rotate() value

type 5 - zoom in

Change zoom level through the scale() value

type 6 - zoom out

Change zoom level through the scale() value

type 7 - side hinge

Change hinge side with the various transform-origin properties, and hinge direction though the rotate() values

type 8 - corner hinge

Change corner with the transform-origin property, and hinge direction through the rotate() value

type 9 - shutter out

Use scaleX() for horizontal shutter, scaleY() vertical shutter

type 10 - shutter in

Use scaleX() for horizontal shutter, scaleY() vertical shutter

type 11 - outline in

Change outline colour with the outline-colour property, timing with the transition property

type 12 - outline out

Change outline colour with the outline-colour property, timing with the transition property

type 13 - flip

Change axis of rotation by using either rotateX() or rotateY()

type 14 - gleam

Change gleam direction with any of the position properties (top, bottom, left, right)

type 15 - filter

Change filter type with the filter property

type 16 - box

Change animation type with the position, width, and/or height properties

Max Ho