Minimal setup for overlay
Below you can see two images that launch overlays. There are two terms being used: the trigger is the element that launches the overlay and the overlay is the element that is being positioned on top of the page.
HTML code for the triggers
First we define the triggers as follows:
These triggers have a reference to the overlay element in the rel attribute. This attribute is a jQuery selector that selects the overlay being used. A typical selector selects one element that has a unique id. For example, #mies1 selects an element that has an id of "mies1".
You can have one or many triggers on the page and each can reference the same or different overlays.
Note: we used a button tag here but you can use any element as a trigger as long as it has the rel attribute. A typical scenario is to use a tag with the rel attribute and a nested img tag.
HTML code for overlays
Now we need the overlays:
Here is the styling for the overlayed element. There are a couple of things you should note here:
- We have not used any images at all. Everything is pure CSS. This gives us the ability to change the dimensions of the overlay dynamically. The overlay's height is dynamically adjusted to the height of the elements inside the overlay.
- We have used some CSS3 rounded borders and drop shadows. These settings will make the overlay look better in most recent browsers without harming older browsers. This is known as "Progressive Enhancement with CSS".
- We have styled the close button although it is not in our HTML structure. This button is automatically generated by the overlay tool with the class name close. You can alter this in the configuration.
- You can use absolute positioning of the elements inside the overlay and those elements are positioned relative to the overlay element. This is because the overlay is also absolutely positioned. This is how CSS works.
- Since the overlay is absolutely positioned it is in most cases placed on top of the page. However if you have other absolutely (or relatively) positioned elements on the page they may appear over your overlay. You can use the z-index parameter to layer your elements properly. An element with a higher z-index is placed on top of an element with a lower value.
Here is the simple styling for the .details element inside the overlay that shows the description of the image:
This is by far the easiest part of this setup. We simply select the trigger elements and enable overlaying without any additional options: