A common design pattern for many websites is to display an image, carousel, or video in the "hero" spot at the top of the page, and then float text, buttons, or other elements on top of it. In order to ensure the text is readable, you may want to darken the underlying media a bit, resulting in a design that might look something like this:
This is fairly simple to achieve in TIME Sites in just a minute or two, but it's important to make sure that your page elements are arranged the right way.
The technique described below is for when you want to place text over something you normally can't, like the: video element, gallery element, image element, or automated carousel you want to apply a filter to that won't affect the text on top. If you want to place text on top of an image or video simply place the image/video into a container as a background image or video, and place the text elements into the same container.
You can begin by placing both the floating text, and the media (carousel or video), within a parent container. They should be siblings within this container (the text should not be inside of the media element.) So when you look at your Page Structure panel, the structure should look something like this:
The top level container, Hero Wrapper in the image above, should have both the width AND max-width set to be 100% wide. This is important, otherwise the the Hero Carousel Images container won't reach the edges of the screen.
Select all the images you want to add in your media library, and drag them into the Hero Carousel Images container. You can set them to start rotating by clicking on "Cycle Images" in the background image control panel.
To allow the text overlay container to sit directly on top of the media element, use the Position Panel to change its positioning to "Fix to Parent Element":
4. All the elements should now be correctly in place. You may need to do some additional styling -- make sure the text is centered, use the Dimensions Panel to place it in the correct position relative to the media, create your button style, and so forth.
5. In order to make the text readable, you may want to darken the media. (Or, if your design is inverted and your text is dark, you may want to brighten the media!) Select the media container and, using the Filters Panel, adjust its Brightness:
A percentage less than 100% will darken the media element; a percentage greater than 100% will brighten it.
This general approach can be used to float any kind content above any kind of element on your page.