Overlay

Create an image overlay, which comes in different styles.


Usage

This component is easily applied. To create a position context, add the .overlay class to a container element around an image. Add the .overlay-panel class to a child element to create the actual overlay panel. Usually you would use a <figure and <figcaption> element for this.

Usage

  • Title

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • <figure class="overlay">
    	<img src="">
    	<figcaption class="overlay-panel">
    		...
    	</figcaption>
    </figure>

Toggle overlay on hover

By default, the overlay is always visible. To hide the overlay and display it on hover, add the .overlay-hover class to the overlay container.

Usage

  • Title

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • <figure class="overlay overlay-hover">
    	<img src="">
    	<figcaption class="overlay-panel overlay-fade">
    		...
    	</figcaption>
    </figure>

Toggle on active

To toggle an overlay when its parent container is in an active state, add the .overlay-active class. This comes in handy, for example, in combination with the Slideshow component.


Overlay background

To give the overlay a background just add the .overlay-background class to the overlay container.

Usage

  • Title

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • <figure class="overlay">
    	<img src="">
    	<figcaption class="overlay-panel overlay-background">
    		...
    	</figcaption>
    </figure>

Overlay icon

It is possible to put basically any content into your overlay. But you can also add the .overlay-icon class to the overlay panel, so it will display an icon instead.

Usage

  • <figure class="overlay">
    	<img src="">
    	<figcaption class="overlay-panel overlay-icon overlay-background"></figcaption>
    </figure>

Overlay position

By default, the overlay covers its entire parent container from the top left. To position and crop the overlay, add one of the following classes to the overlay panel.

Class Description
.overlay-top Add this class to align the overlay to the top.
.overlay-bottom Add this class to align the overlay to the bottom.
.overlay-left Add this class to align the overlay to the left.
.overlay-right Add this class to align the overlay to the right.

Usage

    • Image

      Overlay Top

      Lorem ipsum dolor sit amet.

    • Image

      Overlay Bottom

      Lorem ipsum dolor sit amet.

    • Image

      Overlay Left

      Lorem ipsum dolor sit amet.

    • Image

      Overlay Right

      Lorem ipsum dolor sit amet.

  • <figure class="overlay">
    	<img src="">
    	<figcaption class="overlay-panel overlay-background overlay-top">
    		...
    	</figcaption>
    </figure>

Overlay transitions

Overlay panels and images can easily be animated. Just add one of the following classes to the overlay panel or <img> element. Note, that this only works in combination with the .overlay-hover or .overlay-active class.

Class Description
.overlay-slide-top Add this class to the overlay panel to slide it in from the top.
.overlay-slide-bottom Add this class to the overlay panel to slide it in from the bottom.
.overlay-slide-left Add this class to the overlay panel to slide it in from the left.
.overlay-slide-right Add this class to the overlay panel to slide it in from the right.
.overlay-fade Add this class to the overlay panel or image to fade it in.
.overlay-scale Add this class to the image to scale it up.
.overlay-spin Add this class to the image to slightly rotate it to the right.
.overlay-grayscale Add this class to the image to desaturate it and color it on hover.

NOTE If you'd like to animate the image, but want the overlay panel to be visible at all times, just add the .ignore class to the panel. That way it will be displayed despite the .overlay-hover class.

Usage

    • Image

      Lorem ipsum dolor sit amet.

    • Image

      Lorem ipsum dolor sit amet.

    • Image

      Lorem ipsum dolor sit amet.

  • <figure class="overlay overlay-hover">
    	<img src="">
    	<figcaption class="overlay-panel overlay-background  overlay-bottom overlay-slide-bottom">
    		...
    	</figcaption>
    </figure>

Overlay and flex

You can use the Flex component to align the overlay vertically and horizontally without cropping it.

Usage

    • Title

      Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

    • Title

      Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • <figure class="overlay">
    	<img src="">
    	<figcaption class="overlay-panel overlay-background flex flex-bottom">
    		<h3<Title</h3<
    		...
    		<button<...</button<
    	</figcaption>
    </figure>

Overlay anchor

To use the entire overlay as a link, just place an <a> element inside the overlay container and add the .position-cover class from the Utility component.

Usage

  • Image

    Anchor

    Lorem ipsum dolor sit amet.

  • <figure class="overlay overlay-hover">
    	<img src="">
    	<figcaption class="overlay-panel overlay-fade overlay-background">
    		...
    	</figcaption>
    	<a class="position-cover" href="#"></a>
    </figure>

NOTE To display only the overlay panel as a link, just place the anchor inside the overlay panel.