Overlay

Create an image overlay, which comes in different styles.

Usage

Add the .uk-overlay class to an element following an image to create the overlay panel. To create a position context, add the .uk-inline class from the Utility component to a container element around both. Finally, add one of the .uk-position-* classes from the Position component to align the overlay.

<div class="uk-inline">
  <img src="" width="" height="" alt="" />
  <div class="uk-overlay uk-position-bottom"></div>
</div>
Copy to clipboard
  • Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="uk-inline">
      <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
      <div class="uk-overlay uk-position-bottom">
        <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>

Style modifiers

By default, the overlay has padding, but no additional styling. Add one of these modifier classes to add a background color to the overlay.

Default

For a simple background color, add the .uk-overlay-default class. Or, you can use Tailwind CSS bg-* classes. You can even add backdrop-blur-* for blur effect.

Copy to clipboard
  • Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="uk-child-width-1-2@m" uk-grid>
      <div>
        <div class="uk-inline">
          <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
          <div class="uk-overlay uk-overlay-default uk-position-bottom">
            <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
      <div>
        <div class="uk-inline">
          <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
          <div class="uk-overlay-default uk-position-cover"></div>
          <div class="uk-dark uk-overlay uk-position-bottom">
            <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
    </div>

Primary

For a prominent background color, add the .uk-overlay-primary class. Or, you can use Tailwind CSS bg-* classes. You can even add backdrop-blur-* for blur effect.

Copy to clipboard
  • Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="uk-child-width-1-2@m" uk-grid>
      <div>
        <div class="uk-inline">
          <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
          <div class="uk-overlay uk-overlay-primary uk-position-bottom">
            <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
      <div>
        <div class="uk-inline">
          <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
          <div class="uk-overlay-primary uk-position-cover"></div>
          <div class="uk-overlay uk-position-bottom">
            <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
    </div>

Overlay icon

To display an overlay icon, add the uk-overlay-icon attribute to a <span> element inside the overlay.

<div class="uk-position-center">
  <span uk-overlay-icon></span>
</div>
Copy to clipboard
  • <div class="uk-child-width-1-2@m" uk-grid>
      <div>
        <div class="uk-inline uk-light">
          <img src="/images/dark.jpg" width="1800" height="1200" alt="" />
          <div class="uk-position-center">
            <span uk-overlay-icon></span>
          </div>
        </div>
      </div>
      <div>
        <div class="uk-inline uk-dark">
          <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
          <div class="uk-overlay-default uk-position-cover">
            <div class="uk-position-center">
              <span uk-overlay-icon></span>
            </div>
          </div>
        </div>
      </div>
    </div>

Position

Add one of the .uk-position-* classes from the Position component to align the overlay.

<div class="uk-overlay uk-position-top"></div>
Copy to clipboard
  • Top

    Center

  • <div class="uk-child-width-1-2@m" uk-grid>
      <div>
        <div class="uk-inline">
          <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
          <div class="uk-overlay uk-overlay-default uk-position-top">
            <p>Top</p>
          </div>
        </div>
      </div>
      <div>
        <div class="uk-inline">
          <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
          <div class="uk-overlay uk-overlay-default uk-position-center">
            <p>Center</p>
          </div>
        </div>
      </div>
    </div>

Theme development

On your tailwind.config.js file, add the Overlay component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        overlay: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-overlay.uk-overlay
hook-icon.uk-overlay-icon
hook-default.uk-overlay-default
hook-primary.uk-overlay-primary
hook-misc*