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.

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