Pure CSS Hover Effects

Using a little-known CSS technique, one can avoid using JavaScript for many CSS effects. This means user computer resources are left for other elements of the site that truly require them. Sites load faster for users with new and old computers alike. Typically, hover classes are applied to the same element that is hovered. However, in this instance, the wrapper is hovered, yet a different element is affected. This is achieved using a specific syntax of class chaining. In the portion of CSS below, the wrapper class in its hover state is triggering the circle class to be in its hovered state, as if that circle class is itself being hovered. The same parent class can be used to trigger as many elements as required for the desired effect.


                        

Expanding Circle

One of my favorite hover effects. When the text box is hovered a circle grows and fills the box with color.


                        

Double Circle

A variation of the previous hover effect. This one takes advantage of two circles to create a ripple effect.


                        

Square Icon

Similar to the expanding circle card but square. Can be applied to any of the other examples.


                        

Hover Reveal

A more dynamic variation. When the card is hovered the content is revealed.