Overlays

---

• Components

  • Headers
  • Footers
  • Parallax
  • Cards
  • Masonry Grid
  • Buttons
  • Form Elements
  • Carousel
  • Video Pop-up
  • Floating Divs
  • Overlays
  • Zoom Effect
  • Hover Animate
  • Morphext
  • Background
  • Hover Up
  • Blockquote
  • Pagination
  • Map
  • Accordions
  • Circle Block
  • Artworks
  • Spinners
  • Icon Boxes
  • Counters
  • Progress Bars
  • Helper Classes

• Plugins

  • Animations
  • Bootstrap
  • jQuery
  • Masonry
  • Morphext
  • Owl Carousel
  • Parallax
  • Wow
  • Progress Bar
  • ImagesLoaded
  • Popper
  • Waypoints
  • jQuery Forms
  • Google reCaptcha v2

---

Heading Overlay

The below classes are used to create this overlay:

• .cl-image-overlay-wrapper: Used to create overlay container.
• .cl-image-wrapper: Contains the image.
• .cl-image-overlay: Contains the content.
• .cl-image-heading: Contains the content heading.
• .cl-image-content: Contains the content text.

The .cl-hover and .cl-slide classes makes the slide effect happen. Only on hovering on .cl-hover element, the content of .cl-slide will show.

<div class="cl-image-overlay-wrapper cl-hover">
    <div class="cl-image-wrapper">
        <img src="path/to/image.png" alt="some image">
    </div>
    <div class="cl-image-overlay">
        <div class="cl-image-heading">
            Some Heading...
        </div>

        <div class="cl-image-content cl-text-color-invert cl-slide">
            Some Content...
        </div>

    </div>
</div>

---

Center Content Overlay

The below classes are used to create this overlay:

• .cl-image-overlay-wrapper: Used to create overlay container.
• .cl-image-wrapper: Contains the image.
• .cl-overlay-center or .cl-overlay-end: Contains the content and positions it in center/end.

The .cl-hover class is used with .cl-overlay-center class to retain the hover effect.

<div class="cl-image-overlay-wrapper">
    <div class="cl-image-wrapper">
        <img src="path/to/some-image.png" alt="some image">
    </div>
    <div class="cl-overlay-center cl-hover">
        Some content...
    </div>
</div>

---

Full Image Content Overlay

The below classes are used to create this overlay:

• .cl-image-full-overlay-wrapper: Used to create overlay container.
• .cl-image-wrapper: Contains the image.
• .cl-image-overlay-content: Contains the content.

The .cl-hover and .cl-zoom-img classes makes the image zoom effect happen. Only on hovering on .cl-hover element, the image will get zoomed.

<div class="cl-image-full-overlay-wrapper cl-hover">

    <div class="cl-image-wrapper cl-zoom-img">
        <img src="path/to/some-image.png" alt="some image">
    </div>

    <div class="cl-image-overlay-content cl-text-color-invert">
        Content...
    </div>

</div>