Brickscore / Elements / 
Before/After Image

Before/After Image

Core element

Documentation

Settings

Width & Height

Sets the dimensions of the Before/After Wrapper. Both are set in auto by default.

Show Distance

The initial position of the scroller. Useful to set how much width of the before image you want to show. 150 by default.

Before & After Image

Image Settings

You are able to select am image for before and after states from your media library or external url. You can also select their alternative text and apply CSS filters to the images.

Arrows

Icon

There a 5 arrow icons available: Chevron, Caret, Angles, Square Caret and Arrows. Chevron by default.

Dimensions

Determines the width and height of the arrows. 30px by default.

Gap between arrows

Determines the distance applied between before and after arrows. 10px by default.

Line

Styling

You are able to customize line´s color and width styles

Thumb

Styling

You are able to customize thumb´s border, background, width and height styles

Animation

Opacity

Initial scroller opacity. Will turn into opacity 1 on hover. 0.8 by default.

Opacity Duration

Opacity transition-duration on hover. 0.2s by default.

Don´t miss anything. Join us & build betterJoin Brickscore Community Updates

No spam. Only Brickscore news and showcases

Brickscore 
© 2024 Brickscore. All rights reserved.