Partial text inverting on hover

[internerz]

Hi there,

some time ago I saw a website with a text logo above a navigation. Hovering on the menu items changed their background color. Also the text logo went partially from black to white.
I couldn’t remember which website it was and how it was done. Most definitely not like I did it, because it only works in Webkit (best viewed in big):

http://codepen.io/bstrilziw/pen/xEKOYa

Does anybody have an idea for a clean solution? :)
Thanks in advance!

Edit: “it works” might be an exaggeration. There are still quite some bugs.

[Atelierbram]

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

[Author]

Posts