Skip to main content

Image restrictions

Some animations draw their effect with a ::before or ::after pseudo-element — and a plain <img> tag can't host one; browsers never render pseudo-elements on replaced elements like images, videos or form inputs. Border is the only entrance/hover animation that needs one, so it's the only one this applies to.

To use Border on an image, wrap the image in a container (a <div>, a Bricks/Etch container block, or a block editor Group block) and put the animation class on that wrapper instead of on the image itself.

A Div wrapping an image in Bricks, with the Border animation class on the Div The Border animation goes on the wrapper (the Div), not on the image inside it.