AI Agents for Growth
.jpeg?width=200&height=200&name=pexels-mikhail-nilov-6893349%20(1).jpeg)
$100m+
147k+
90%
SUPPORT DOCUMENTATION
Vertical Image Marquee
Documentation
Setup & Troubleshooting
Add floating images that scroll vertically inside a fixed-height container, while keeping your logo and message anchored in the center. Designed for premium hero sections, launches, and high-impact landing pages.
Quick setup (5 steps)
1
Add the module to a page, template, or drag-and-drop section.
In the HubSpot editor, search for Vertical Image Marquee and drop it into your layout.
2
Set the container height.
Use 100vh for full-screen hero sections or 600px–800px for standard sections.
3
Add floating images in the repeater.
Start with 6–10 images for a rich layout, or 4–6 for a clean, minimal look.
4
Configure each image (size, position, speed, layering).
Mix speeds and stagger offsets to create depth and natural movement.
5
Add the centered overlay (optional).
Drop in a logo/image and add headline + supporting copy that stays readable while images move behind it.
Best practice: Use 2–3 “hero” images with larger widths and slower speeds, then support them
with smaller, faster images for layered depth.
What you can customise
- Container height (
vhorpx) - Loop gap for smoother re-entry spacing
- Pause on hover (optional)
- Randomize start positions (organic layout)
- Per-image width, left offset, speed, and z-index
- Optional rounded corners and shadows (per image)
- Centered overlay width (desktop + mobile) and internal spacing
- Centered overlay logo/image + rich text/HTML content
Perfect for
Hero sections
Product launches
Campaign landing pages
Brand storytelling
Agency templates
Premium site refreshes
Before you publish
- Confirm your centered overlay reads clearly over moving images.
- Test on mobile: adjust mobile overlay width if copy feels tight.
- Ensure every image has meaningful alt text (accessibility/SEO).
- Check image layering (z-index) so key visuals sit above/below intentionally.
How the animation works
Each image scrolls vertically at its own speed. When it exits the top, it loops back to the bottom with a configurable gap. The centered overlay stays anchored so your message is always the focal point.
Troubleshooting
Images appear crowded or overlap awkwardly
- Increase the Gap value so images re-enter with more spacing.
- Reduce the number of images or spread left offsets further apart.
- Adjust widths so not too many large images occupy the same region.
The overlay feels off-centre on mobile
On some HubSpot themes, background layers and grid gutters can shift perceived centering.
This module pins the overlay to the visible marquee area. If copy feels tight, increase the
mobile overlay width (e.g.
420px), or reduce logo size.
My overlay logo looks too small on mobile
If your logo uses HubSpot custom maximum size, the module keeps it responsive on mobile to
prevent layout breakage. If you want a bigger hero feel, increase mobile overlay width and
upload a slightly larger logo asset.
Animation feels too fast/too slow
Adjust the Speed per image. A good starting mix is: background images at 6–9, foreground
images at 10–16, and one accent image faster for visual energy.
Support
If you need help tuning layout for your theme, send: (1) a page URL, (2) a mobile screenshot, and (3) your current overlay width + image settings.
Starter layout: use left offsets like 6%, 18%, 62%, 78% + varied widths (12vw–26vw) + mixed speeds.
Create motion-driven hero sections that stand out
Use the Module to layer floating images with smooth vertical motion and a fixed center message.