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

Home Forums CSS Partial text inverting on hover

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #245039

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

    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.


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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.