Canvas Docs

Item Overlays

Item Overlays

Item overlays layer content on top of an image that reveals on hover, perfect for portfolio thumbnails, product cards, and gallery items. The core building block is .bg-overlay, which holds a positioned content layer and a background layer.

Structure

  • .bg-overlay: the overlay wrapper, placed as a sibling of the image inside the item.
  • .bg-overlay-content: the visible content layer (icons, buttons, captions). Use flex alignment utilities to position it.
  • .bg-overlay-bg: the tint or colour layer behind the content. Add a background colour utility or bg-transparent.

Centered Icon Overlay

A play icon centered over an image that opens a lightbox:

<div class="portfolio-image">
    <a href="#"><img src="images/portfolio/1.jpg" alt="Project"></a>
    <div class="bg-overlay">
        <div class="bg-overlay-content">
            <a href="https://vimeo.com/89396394"
               class="overlay-trigger-icon size-lg bg-light text-dark"
               data-lightbox="iframe"><i class="uil uil-play"></i></a>
        </div>
    </div>
</div>

Product Action Overlay

Bottom-aligned action buttons on a product card:

<div class="product-image">
    <a href="#"><img src="images/shop/dress/1.jpg" alt="Checked Short Dress"></a>
    <div class="bg-overlay">
        <div class="bg-overlay-content align-items-end justify-content-between">
            <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-cart-plus"></i></a>
            <a href="include/ajax/shop-item.html" class="btn btn-dark"
               data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
        </div>
        <div class="bg-overlay-bg bg-transparent"></div>
    </div>
</div>

Text Mask Overlay

Combine an overlay with a text mask for captions that fade in over the image:

<div class="bg-overlay">
    <div class="bg-overlay-content text-overlay-mask dark align-items-end justify-content-start">
        <h3>Caption Title</h3>
    </div>
    <div class="bg-overlay-bg bg-transparent"></div>
</div>

Alignment

Position the content layer with Bootstrap flex utilities on .bg-overlay-content:

  • align-items-start / align-items-end for vertical placement.
  • justify-content-start / justify-content-between / justify-content-end for horizontal placement.

Pairing With Hover Animations

Overlay triggers commonly animate in on hover. Add data-hover-animate to reveal them (see the Hover Animations shortcode):

<div class="bg-overlay">
    <div class="bg-overlay-content">
        <span class="overlay-trigger-icon size-lg op-ts op-07 bg-dark text-light"
              data-hover-animate="op-1" data-hover-animate-out="op-07">
            <i class="bi-image"></i>
        </span>
    </div>
</div>

Tips

  • Use overlay-trigger-icon with a size-* class for circular icon triggers.
  • Add data-lightbox to overlay anchors to open images, galleries, or video iframes.
  • Keep overlay content sparse. One or two actions read cleaner than a crowded panel.

Usage

<div class="bg-overlay">
	<div class="bg-overlay-content">
		<a href="https://vimeo.com/89396394" class="overlay-trigger-icon size-lg bg-light text-dark" data-lightbox="iframe"><i class="icon-line-play"></i></a>
	</div>
</div>

Core Elements

  1. 1

    .bg-overlay

    This is the Main Overlay Element which is a wrapper for Inner Overlay Content and Background

  2. 2

    .bg-overlay-content

    This is the Inner Content Element for the Overlay. You can add virtually any content inside like Icons, Buttons or Featured Boxes and control the Placement using the Flex Utility Classes

  3. 3

    .bg-overlay-bg

    This is the Background Element for the Overlay. You can apply the Background Classes or Styles on this Element

Extras

With Hover Animations

Canvas can animate an element into view when its parent is hovered, using data-hover-animate. This is common on portfolio overlays where icons fly in on hover.

<div class="portfolio-item">
    <div class="portfolio-image">
        <img src="images/portfolio/2/1.jpg" alt="Project">
    </div>
    <div class="portfolio-overlay">
        <a href="images/portfolio/full/1.jpg"
           class="overlay-trigger-icon bg-light text-dark"
           data-lightbox="image"
           data-hover-animate="fadeInDownSmall"
           data-hover-animate-out="fadeOutUpSmall"
           data-hover-speed="350"
           title="Open">
            <i class="bi-arrows-fullscreen"></i>
        </a>
    </div>
</div>

Attributes:

  • data-hover-animate the animation played when the parent is hovered (any animate.css style name, for example fadeInDownSmall, fadeInUpSmall, zoomIn).
  • data-hover-animate-out the animation played when the hover ends.
  • data-hover-speed duration in ms.
  • data-hover-parent=".portfolio-item" optionally names the element whose hover triggers the animation (otherwise the nearest sensible parent is used).

Notes:

  • Stagger several overlay icons by giving each a different animation and speed.
  • These hover-triggered animations are separate from data-animate, which fires once when an element scrolls into view.

CSS Variables

.overlay-trigger-icon {
	--cnvs-bg-overlay-icon-size: 40px;
	--cnvs-bg-overlay-icon-gap: 0.25rem;
	--cnvs-bg-overlay-icon-font-size: 1.125rem;
	--cnvs-bg-overlay-icon-rounded: 50%;
}

.bg-overlay-mask {
	--cnvs-bg-overlay-mask-color: #000;
	--cnvs-bg-overlay-mask-opacity: 0.55;
}
Was this page helpful?