top of page

Overlapping transparent video

Templates Design


Mar 15, 2023

Overlapping transparent video

This design creates the illusion of gazing deep into space with a spinning transparent video positioned between large typography elements for an overlapping effect.

Learn how to create this design in 7 steps

1. Apply an 8X3 grid to a blank section.

2. Set the size of the first grid row to Min 17vw and Max max-content, the second grid row to Min 7vw and Max max-content and the third grid row to Min 24vw and Max max-content. Change the width of the first and eighth grid columns to 3vw.

image of step 2

3. Add the first title and place it in the first grid row. Dock it to the top with a margin of 150px, to the left with a 40px margin, and to the right with a 0% margin.

image of step 3

4. Add the second title to the third grid row. Dock it to the top with a 60px margin.

image of step 4

5. Add the transparent video and in the Inspector panel under Position, hold down shift and select all of the grid cells so it’s located across all of them. Dock it to the center and add a 15px bottom margin.

image of step 5

6. Open the Layers panel. Select the transparent video and drag it between the text elements to create the overlapping effect.

image of step 6

7. Preview the final results. The video moves over the top text and under the bottom text. 

Refresh your skills before you start by visiting Academy X.

More inspiration



Editor X

The rest is up to you.

bottom of page