Overlapping Media
Align an image, video, or form to overlap a section
View a live demo of this module.
Content
- Select media type (image, video, form)
- Set overlap distance on desktop and mobile
Styles
- (If video) Change play button icon color and background color
- (If video) Change image overlay
How to Use the Overlapping Media Module
The Overlapping Media module creates striking visual depth by positioning your chosen media element to extend beyond the boundaries of its containing section. This design technique draws visitor attention and breaks up traditional page layouts, making it particularly effective for hero sections, feature highlights, and portfolio showcases.
You’ll find this module works exceptionally well on landing pages where you need to create visual impact, about pages where you want to showcase team photos or company videos, and service pages where overlapping forms can capture leads while maintaining visual appeal. The module’s flexibility with three media types—images, videos, and forms—makes it adaptable to various marketing objectives.
When adding this module through the HubSpot page editor’s drag-and-drop interface, consider the surrounding sections carefully. The overlapping effect works best when there’s sufficient contrast between your media and the background section below. Place sections with solid background colors adjacent to this module to ensure the overlapping element stands out prominently.
For video content, take advantage of the customizable play button styling to match your brand colors. The image overlay feature lets you adjust the video thumbnail’s appearance before visitors click play, ensuring consistency with your page’s visual theme.
The desktop and mobile overlap distance settings give you precise control over how far your media extends into adjacent sections. Start with moderate overlap values and preview your changes across devices—mobile screens often require less overlap distance to maintain readability and visual balance.
Remember that overlapping elements can affect the spacing of content below them, so you may need to adjust the padding in subsequent sections to prevent text or other elements from being obscured by your overlapping media.