Exclude elements from full page CSS .html filter on hover

I was hoping to get some help with a site I'm working on. I'm very new to CSS so excuse if this is basic, but I'm yet to find a solution. I'm sure my head will combust if I keep shooting blind at this issue, I'm creating using cargo.site if it helps.

I have a style filter overlaying the entire site:

html {      -webkit-filter: grayscale(100%);      -moz-filter: grayscale(100%);      filter: brightness(80%) sepia(100%) saturate(0.2);  }  

However, I would like to exclude all images (or elements so I can include embedded videos or pdfs) from these filters on hover so you can see them in full colour. I assume the other option would be to filter only images... if this is easier let me know, but the site looks great currently with a singular filter so everything looks coherent and the other embedded elements look great under the filter too.

I have two lines in the CSS code which relate to images, I'm not sure which one encapsulates all images, so I will leave these here if they help answer.

img {      border: 0;      padding: 0;  }    .content img {      float: none;      margin-bottom: 0em;  }  

Thank you very much

https://stackoverflow.com/questions/65516500/exclude-elements-from-full-page-css-html-filter-on-hover December 31, 2020 at 12:06PM