search

sortabrilliant / alteredreality

Transform your images into something new with filters.
2 stars 1 forks source link

Filter being applied to caption #1

Closed nickhamze closed 4 years ago

nickhamze commented 4 years ago

I found one small issue. It looks like the filter is being applied to the caption as well. I think we need to edit the CSS a bit.

Change it from

.aden, .is-style-aden

to .aden img, is-style-aden img

You do that for the SVG filters but not the other ones.

Mamaduka commented 4 years ago

Others are CSSgram filters and they need to be applied to the parent element.

We're using pseudo-elements (i.e. ::before and ::after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a replaced element like <img>). The recommendation is to wrap your images in a <figure> tag.

nickhamze commented 4 years ago

Gotcha. I'll let people know it the docs to not use captions.

nickhamze commented 4 years ago

Just adding this here so I don't forget. Super hacky but if someone wants to know how to do it. this CSS will make the caption look normal. 

figure[class*="is-style-"] figcaption {
    position: absolute;
}