You cannot have multiple CSS classes define various filters and then add the different classes. This is a limitation of CSS and how they made the filter spec.
When you add a Hype filter, it uses inline styles so that takes precedence in CSS. You can add the !important directive to the end of your filter property to override. example usage:
filter: invert(100%) !important;
What is your use case? You can add to the inline style via javascript, but you’ll be fighting against Hype’s engine. It is better to use a separate <style> element typically and use !important or uncheck Protect from External Styles in the Document Inspector where applicable. Alternatively, you could just make an empty Rectangle Element and have your own Inner HTML that has the <img> tag you want to modify. (note you can use the ${resourcesFolderName}/yourImage.jpg syntax for the src to access assets in the resources library)
