Overlays

Ensemble image overlays help you to add additional information to a static image. the overlay can contain a heading, sub-heading and/or a link.

Default

The default overlay, has a background that will fade in, followed by caption text entering from above.

<div class="overlay">
	<div class="overlay__background"></div>
		<div class="overlay__content text-center text-color-2">
			<span class="overlay__content-heading">An overlay heading</span>
			<span class="overlay__content-text">Some sub text</span>
		</div>
	<img src="overlay-demo.jpg" alt="" class="overlay__image">
</div>

Slide in right

By adding the overlay__background--slide-right modifier class to the overlay-background class, we can alter the slide effect to swipe in from the right.

<div class="overlay">
	<div class="overlay__background overlay__background--slide-right"></div>
		<div class="overlay__content text-center text-color-2">
			<span class="overlay__content-heading">An overlay heading</span>
			<span class="overlay__content-text">Some sub text</span>
		</div>
	<img src="overlay-demo.jpg" alt="" class="overlay__image">
</div>

Slide in left

By adding the overlay__background--slide-left modifier class to the overlay-background class, we can alter the slide effect to swipe in from the left.

<div class="overlay">
	<div class="overlay__background overlay__background--slide-left"></div>
		<div class="overlay__content text-center text-color-2">
			<span class="overlay__content-heading">An overlay heading</span>
			<span class="overlay__content-text">Some sub text</span>
		</div>
	<img src="overlay-demo.jpg" alt="" class="overlay__image">
</div>

Skew

By adding the overlay__image--skew modifier class to the overlay__image class, we can alter the effect to create a skewing zoom in on our target image.

<div class="overlay">
	<div class="overlay__background"></div>
		<div class="overlay__content text-center text-color-2">
			<span class="overlay__content-heading">An overlay heading</span>
			<span class="overlay__content-text">Some sub text</span>
		</div>
	<img src="overlay-demo.jpg" alt="" class="overlay__image overlay__image--skew">
</div>

Zoom

By adding the overlay__image--zoom modifier class to the overlay__image class, we can create a zoom-in effect on our target image.

<div class="overlay">
	<div class="overlay__background"></div>
		<div class="overlay__content text-center text-color-2">
			<span class="overlay__content-heading">An overlay heading</span>
			<span class="overlay__content-text">Some sub text</span>
		</div>
	<img src="overlay-demo.jpg" alt="" class="overlay__image overlay__image--zoom">
</div>