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, in this instance however, the wrapper is hovered and 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. Check out some different examples of hover effects you can achieve with this method.

".circle--card__wrapper:hover .circle--hover--effect"