Home › Forums › CSS › Partial text inverting on hover › Reply To: Partial text inverting on hover
August 30, 2016 at 7:22 am
#245046
Atelierbram
Participant
A fork of your demo done with clip-path
and linear-gradients for background:
http://codepen.io/atelierbram/pen/XjANzK
Hovering on the different menu items (sets a specific class on the parent element and) appears to change the background-color, but it is really a linear-gradient on the parent-element of the H1-title which is swapped out for another. The partially from-black-to-white-text on hover, is done with clip-path, showing only the clipped part of the H1 text in white, and the – with javaScript cloned – H1 text in black underneath (partially invisible because of the linear-gradient, which sits on top of it).