Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 16, 2017 at 12:12 pm #821976
    Guenni007

    too fast closed – sometimes there are different ways to obtain one effect.
    Source thread is here: https://kriesi.at/support/topic/add-hover-on-logo/

    on modern browser times you can use filters instead of a javascript. this influence is imediately done – no waiting till page is loaded:

    Chrome (Google) will force the use in the future and will support this methods.

    see example page here : https://webers-testseite.de/8-columns/
    hover the white filed under the film ( green border) that was your original white png – which is transformed through filter-combinations:
    (i gave container with the image a custom class to selct it better – on logo you can do it via .logo img:hover )

    .logohover img:hover {
-webkit-filter: invert(0.25) sepia(0.32) hue-rotate(30deg) saturate(10);
filter: invert(0.25) sepia(0.32) hue-rotate(30deg) saturate(10);
}

    and you can even do a focus state if you like

    July 16, 2017 at 12:25 pm #821979
    Guenni007

    Or – like in former times ( than you can have different colors etc. ) with a sprite image and only shift by css the “image”
    Big advantage of sprite images is that all you need is allready loaded because both images are combined in one with known distance

    • This reply was modified 7 years, 4 months ago by Guenni007.
    July 17, 2017 at 5:32 am #822305
    Rikard

    Hi,

    Thanks a lot for sharing as usual @guenni007, much appreciated :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.