The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Partial text inverting on hover Reply To: Partial text inverting on hover


A fork of your demo done with clip-path and linear-gradients for background:

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).