Containers and stacks you place inside of CoverOver can continue to have layout or styling applied. Within 'edit mode' some instructions are shown to illustrate the classes you can use; to toggle, open or close your CoverOver overlay. Practically any button stack can be used for this task. Regular text links can be used as well.

As a bonus, there is a provision for you to have multiple CoverOver stacks on the same page. To facilitate this, you simply need to adjust the 'scope' value; thereby ensuring each instance of CoverOver on the same page has a unique number applied.

Examples

Here is a working example of CoverOver applied to a text stack. In a real scenario, you could use CoverOver to display an overlay on a single picture, a slideshow or a video, as the page loads.
 

This is CoverOver
Click below to reveal the hidden content underneath

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sapien mi. Aenean auctor lobortis ex vel eleifend. Praesent elit urna, dapibus vel bibendum at, lobortis quis diam. Nam semper et nibh eu dignissim. Sed diam velit, gravida quis dolor pretium, sollicitudin commodo tortor. Maecenas lacinia quam nibh, ut cursus lacus vehicula nec. Duis volutpat quis arcu et efficitur. Sed efficitur justo lacinia risus lacinia, eget rhoncus diam lobortis. Sed neque enim, vehicula lobortis fermentum sit amet, lacinia nec neque. Aliquam in euismod lectus.

Suspendisse at sodales leo. Vestibulum aliquam facilisis tellus, fermentum placerat justo tempus in. Etiam aliquet erat est, consectetur auctor purus mollis sit amet. Sed a tellus tincidunt, posuere arcu id, tincidunt magna. Donec nunc erat, consectetur id sem vitae, elementum posuere nunc. Suspendisse ante sapien, imperdiet eu placerat et, consectetur at augue. Mauris fringilla urna arcu, vulputate fringilla sem luctus in. Suspendisse fermentum lectus id eleifend lobortis. Aliquam urna neque, placerat pretium tellus vitae, bibendum posuere diam.

Pellentesque enim neque, vestibulum sed sollicitudin et, convallis nec odio. Quisque lobortis velit quis elementum aliquam. Nullam vitae nisl lacinia, vehicula augue ut, cursus nulla. Praesent porta nisi porta auctor accumsan. Pellentesque blandit in odio id egestas. Maecenas luctus, velit a vulputate tempus, risus metus feugiat mauris, in interdum felis sem ut mi. Fusce ac molestie arcu. Etiam pellentesque mi non rhoncus maximus. Praesent volutpat nisi non urna tincidunt, nec iaculis mi egestas. Cras dolor lacus, eleifend ut volutpat ac, venenatis ac tellus. Etiam scelerisque congue sapien, sit amet laoreet nulla lacinia eget. Fusce id purus sem. Duis metus arcu, eleifend a ligula a, lobortis consectetur neque. Etiam imperdiet, nulla ac sagittis lobortis, enim sem pretium enim, sed scelerisque ante diam ut nunc. Integer bibendum dolor nec velit luctus hendrerit.

Reveal CoverOver Again


This is a second example, using a button to trigger an overlay that fills the whole page. This example also works in reverse (i.e. the overlay is hidden on page load and only displays when the button gets clicked).

You have been covered!
This overlay fills the whole page.

 

Setup

Follow these instructions for using CoverOver:
  1. Once installed into Stacks and RapidWeaver, drag and drop a copy of CoverOver into your webpage.
  2. Choose your preferred configuration from the 'configuration' select menu, within the stack settings.
  3. Adjust the background fill and opacity, to suit you design.
  4. Drag and drop content into the 'overlay' drop zone.
  5. If you are using CoverOver to hide stacks (like a single image, slideshow or video), then add this to the second drop zone.
  6. Read the instructions for creating links or buttons to close the overlay. We use a standardised practice of class custom attributes and values applied on links or buttons, for maximum ease of setup and flexibility.
  7. Preview the page to check everything is working as expected. Export or publish the page, when done.

If you are wanting to use multiple CoverOver stacks on the same page, please ensure each one has a unique scope (number value) in the stack settings.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.