Overlay

Create an image overlay, which comes in different styles.

Usage

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

Example

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Markup

<figure class="f-overlay">
	<img src="" width="" height="" alt="">
	<figcaption class="f-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 .f-overlay-hover class to the overlay container.

Example

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

<figure class="f-overlay f-overlay-hover">
	<img src="" width="" height="" alt="">
	<figcaption class="f-overlay-panel">...</figcaption>
</figure>

Toggle on active

To toggle an overlay when its parent container is in an active state, add the .f-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 .f-overlay-background class to the overlay container.

Example

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Markup

<figure class="f-overlay">
	<img src="" width="" height="" alt="">
	<figcaption class="f-overlay-panel f-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
.f-overlay-top Add this class to align the overlay to the top.
.f-overlay-bottom Add this class to align the overlay to the bottom.
.f-overlay-left Add this class to align the overlay to the left.
.f-overlay-right Add this class to align the overlay to the right.

Example

  • 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.

Markup

<figure class="f-overlay">
    <img src="" width="" height="" alt="">
    <figcaption class="f-overlay-panel f-overlay-top">...</figcaption>
</figure>

Overlay icon

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

Example

search
search

Markup

<figure class="f-overlay">
	<img src="" width="" height="" alt="">
	<figcaption class="f-overlay-panel f-overlay-icon">
		<i class="material-icons">search</i>
	</figcaption>
</figure>

Overlay image

To apply an image as an overlay, add the .f-overlay-image class to an <img> element with the .f-overlay-panel class.

Example

Markup

<figure class="f-overlay">
    <img src="" width="" height="" alt="">
    <img class="f-overlay-panel f-overlay-image" src="" width="" height="" alt="">
</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 .f-overlay-hover or .f-overlay-active class.

Class Description
.f-overlay-slide-top Add this class to the overlay panel to slide it in from the top.
.f-overlay-slide-bottom Add this class to the overlay panel to slide it in from the bottom.
.f-overlay-slide-left Add this class to the overlay panel to slide it in from the left.
.f-overlay-slide-right Add this class to the overlay panel to slide it in from the right.
.f-overlay-fade Add this class to the overlay panel or image to fade it in.
.f-overlay-scale Add this class to the image to scale it up.
.f-overlay-spin Add this class to the image to slightly rotate it to the right.
.f-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 .f-ignore class to the panel. That way it will be displayed despite the .f-overlay-hover class.

Example

  • Image

    Lorem ipsum dolor sit amet.

  • Image

    Lorem ipsum dolor sit amet.

  • Image

    Lorem ipsum dolor sit amet.

Markup

<!-- This example is sliding in the overlay panel from the top -->
<figure class="f-overlay f-overlay-hover">
	<img src="" width="" height="" alt="">
	<figcaption class="f-overlay-panel f-overlay-slide-top">...</figcaption>
</figure>

<!-- This example is scaling up the image while the overlay panel always remains visible -->
<figure class="f-overlay f-overlay-hover">
	<img class="f-overlay-scale" src="" width="" height="" alt="">
	<figcaption class="f-overlay-panel f-ignore">...</figcaption>
</figure>

<!-- This example is spinning the image and sliding in the overlay panel from the bottom -->
<figure class="f-overlay f-overlay-hover">
	<img class="f-overlay-spin" src="" width="" height="" alt="">
	<figcaption class="f-overlay-panel f-overlay-slide-top">...</figcaption>
</figure>

Overlay and flex

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

Example

  • Title

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • Title

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Markup

<!-- In this example the overlay panel is centered vertically and horizontally -->
<figure class="f-overlay">
	<img src="" width="" height="" alt="">
	<figcaption class="f-overlay-panel f-flex f-flex-center f-flex-middle f-text-center">
		<div>...</div>
	</figcaption>
</figure>

<!-- In this example the overlay panel is aligned to the bottom -->
<figure class="f-overlay">
	<img src="" width="" height="" alt="">
	<figcaption class="f-overlay-panel f-flex f-flex-bottom">
		<div>...</div>
	</figcaption>
</figure>

Overlay anchor

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

IMPORTANT When applying this, make sure to replace the <figcaption> element with another container element, like a <div>. Otherwise the markup will not be validated.

Example

  • Image

    Anchor

    Lorem ipsum dolor sit amet.

  • Markup

    <figure class="f-overlay">
    	<img src="" width="" height="" alt="">
    	<figcaption class="f-overlay-panel">...</figcaption>
    	<a class="f-position-cover" href=""></a>
    </figure>

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