how to exclude logo image from an svg filter?

  • Resolved kk_admin

    (@kk_admin)


    8 years, 6 months ago

    hello, so I have a site project in building, which is https://arielwoy.com/project/ – for the content you’ll get not found, but my question regards the thing you can see: the logo header.
    I have a hover effect that uses an svg filter sitewise, which is the following:

    	
img {
  filter: url(filters.svg#grayscale);
  /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
  /* Google Chrome & Safari 6+ */
}
img:hover {
  filter: none;
  -webkit-filter: none;
}
<svg xmlns="https://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
  </filter>
</svg>

    I would like to exclude the logo from this hover effect (and possibly also other images if I feel like, if there is a solution that would use the id tag for instance). What should I put in the custom css?

Viewing 6 replies - 1 through 6 (of 6 total)
  • hannah

    (@hannahritner)

    Hey,
    What exactly are you wanting this hover to effect? It may be easier to give it an id, rather than using css to exclude things.

    Hannah

    #thelogo img {
 filter: none;
 filter: none;
 -webkit-filter: none;
}

    That is one example ^ but I think you would be better off targeting the images you want to have this like hannah suggests.

    Ben
    Kadence Themes

    Thread Starter kk_admin

    (@kk_admin)

    Hi, thank you both so much!

    I want this filter to affect most part of the images on my site, but not all of them (excluding some navigation buttons, logo, etc.), Basically, all the photos. There would be at maximum 10 images not to be affected by this

    I realise it might be a stupid and basic question but honestly I don’t know how to target the specific images…

    @Kadence themes this does work thank you! Once I know how to exclude the few other images I’m all set!

    Another problem with this filter is that firefox doesn’t recognise it, as I see, although this is not related to the theme.

    • This reply was modified 8 years, 6 months ago by kk_admin.
    Thread Starter kk_admin

    (@kk_admin)

    update: I fixed ff issue.

    only the original one remains, how to make effect work for most pics, but excluding a couple of them.

    Use chrome and inspect so you can see the css classes.

    https://www.kadencethemes.com/chrome-inspect-tool/

    Kadence Themes

    Thread Starter kk_admin

    (@kk_admin)

    Yes, thank you! I figured out the rest, putting img.imageclass in front of the piece of code you applied to the logo.

    Thank you very very much!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘how to exclude logo image from an svg filter?’ is closed to new replies.