How to write inline css for an image

(marrouche) #1

I have in the doc head some ’ filter effects ’ css class not build in in hype.

preview in doc window ok but not in browser

#2

Some browser need vendor prefixes. The preview engine inside of hype is based on WebKit. Just look up the bold word to find more information.

(marrouche) #3

.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
it is there .
could not apply more than one effect at a time

another part :
How to write inline css for an image

(marrouche) #4

better > add a filter effect tru a css and choose a filter effect from the build in hype > the css effect is gone’
example : added an invert effect from css , then tru build-in a shadow effect > the result no more css filter effect

(Jonathan Deutsch) #5

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)

(marrouche) #6

I shall try it and get back
many thanks