Item Overlays

This is the Best Way to Overlay Elements/Backgrounds or Icons on a Grid Item or any Relative Container and completely compatible with the Bootstrap Flex Grid for Super Flexible and Variable content. It is also completely compatible with the Hover Animations Shortcode.

Code Example

<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

  • .bg-overlay

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

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

  • .bg-overlay-bg

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

Item Overlays using Hover Animations

<!-- Overlay: Start -->
<div class="bg-overlay">
	<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
		<a href="images/portfolio/full/1.jpg" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-lightbox="image" title="Image"><i class="icon-line-plus"></i></a>
		<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="icon-line-ellipsis"></i></a>
	</div>
	<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
<!-- Overlay: End -->

Last Modified: June 4, 2020

Need Help?