Overlapping transparent video
.jpg)
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.
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.
4. Add the second title to the third grid row. Dock it to the top with a 60px margin.
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.
6. Open the Layers panel. Select the transparent video and drag it between the text elements to create the overlapping effect.
7. Preview the final results. The video moves over the top text and under the bottom text.
Feeling inspired? Create this design on Editor X.
Refresh your skills before you start by visiting Academy X.
