# ghostkit/3.4.1/gutenberg/blocks/image-compare/styles/_base.scss

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.4.1. 48 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.4.1/code/gutenberg/blocks/image-compare/styles/_base.scss
- Raw: https://pluginprobe.com/plugins/ghostkit/3.4.1/raw/gutenberg/blocks/image-compare/styles/_base.scss
- Modified: 2024-02-18T18:40:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.4.1/code/gutenberg/blocks/image-compare/styles/_base.scss#L10-L20`.

```scss
.ghostkit-image-compare {
	cursor: pointer;
}

.ghostkit-image-compare-images {
	position: relative;
	overflow: hidden;

	img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.ghostkit-image-compare-image-before,
.ghostkit-image-compare-image-after {
	transition: var(--gkt-image-compare__transition-duration) clip-path var(--gkt-image-compare__transition-easing);
}

.ghostkit-image-compare-image-before {
	clip-path: polygon(var(--gkt-image-compare__position) 0, var(--gkt-image-compare__position) 100%, 0 100%, 0 0);

	.ghostkit-image-compare-vertical & {
		clip-path: polygon(100% 0, 100% var(--gkt-image-compare__position), 0 var(--gkt-image-compare__position), 0 0);
	}
}

.ghostkit-image-compare-image-after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	clip-path: polygon(100% 0, 100% 100%, var(--gkt-image-compare__position) 100%, var(--gkt-image-compare__position) 0);

	.ghostkit-image-compare-vertical & {
		clip-path: polygon(100% var(--gkt-image-compare__position), 100% 100%, 0 100%, 0 var(--gkt-image-compare__position));
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

```