how to exclude logo image from an svg filter?

  • Resolved kk_admin

    (@kk_admin)


    7 years, 7 months ago

    hello, so I have a site project in building, which is http://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="http://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)

    7 years, 7 months ago

    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

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    7 years, 7 months ago

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

    7 years, 7 months ago

    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 7 years, 7 months ago by kk_admin.
    Thread Starter kk_admin

    (@kk_admin)

    7 years, 7 months ago

    update: I fixed ff issue.

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

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    7 years, 7 months ago

    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)

    7 years, 7 months ago

    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.