SaaSFlowDocs

Module · Video

Video Hover Cards

Cards that play a short video when visitors hover over them.

59 settingsPagesBlog postsBlog listings

Where it is used

Content settings

What the module says and shows. Repeaters (groups you can add items to) are marked as such.

SettingTypeWhat it does
EyebrowTextSmall label above the heading. Leave empty to hide it.Default: CUSTOMER STORIES
HeadingTextWrap words in [brackets] to highlight them.Default: Real teams. [Real results.]
DescriptionRich textText under the heading. Leave empty to hide it.
Video cardsRepeater · 5 settings

Each card shows its cover image and plays its video while hovered.

TitleTextShown on the card.Default: Card title
Short textTextOptional line under the title. Leave empty to hide it.
Video fileFileAn MP4 from the file manager, ideally under 8 MB and 10-20 seconds long. It plays muted while hovered.
Cover imageImageOptional. Without a cover image the card shows the first frame of the video.
LinkLinkOptional. Makes the whole card a link.

Style settings

In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.

SettingTypeWhat it does
LayoutGroup · 6 settings
Cards per row on desktopNumberScreens 1024px and wider.Default: 3
Cards per row on tabletNumberScreens from 640px to 1023px.Default: 2
Cards per row on phonesNumberScreens under 640px.Default: 1
Cards on phonesChoiceSwipe: one row that scrolls sideways, with the next card peeking in.Options: StackedOne row to swipeDefault: Stacked
Space between cardsNumberGap between cards.Default: 20
Header alignmentChoiceEyebrow, heading and description.Options: CenteredLeftDefault: Centered
Video playbackGroup · 3 settings
Start over on each hoverOn/offOff: the video carries on from where it stopped.Default: On
On touch screensChoicePhones and tablets have no hover.Options: Play the card in the middle of the screenPlay on tapShow the cover image onlyDefault: Play the card in the middle of the screen
SoundChoiceBrowsers only allow sound after the visitor has clicked or tapped somewhere on the page. Until then the video plays muted and the speaker button turns the sound on.Options: Play with sound (a speaker button lets visitors mute)MutedDefault: Play with sound (a speaker button lets visitors mute)
Color modeChoice"Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site
Eyebrow styleChoice"Same as theme" follows Theme settings > Eyebrow.Options: Same as themePlain textPillGradient badgeDefault: Same as theme
Highlight colorColorColor for [bracketed] words in the heading. Leave empty for the theme gradient.
FontsGroup · 2 settings
Heading fontFontStarts as the theme's heading font. Change it to use another font in this module only.Default: Outfit
Text fontFontStarts as the theme's body font. Change it to use another font in this module only.Default: Inter
Transparent backgroundOn/offRemoves this section's background so the page background shows through. Useful for blending sections together.Default: Off
Background colorColorLeave empty to use the theme colors for the current light or dark mode.
Background effectGroup · 6 settings
Show background glowOn/offDefault: Off
IntensityNumberHow strong the glow is. 0% hides it.Default: 60
Flowing movementOn/offPlays an entrance animation. Visitors who turn off motion on their device don't see it.Default: On
Fade out at the top and bottomOn/offFades the glow out at the edges so it blends into the next section.Default: On
Glow color 1ColorLeave empty to use the theme primary color.
Glow color 2ColorLeave empty to use the theme accent color.
Background animationChoiceA subtle moving background behind this section. Brand colors only; still for visitors who turn off motion.Options: NoneSoft bubblesAurora glowDrifting dot gridRipplesDefault: None
Animation strengthNumberHow visible the background animation is.Default: 45
Number of bubblesNumberHow many bubbles float in this section. Phones show about half of them.Default: 6
Bubble arrangementNumber0: this section gets its own random arrangement. Pick any other number to shuffle the bubbles into a new one, for example if a bubble sits behind your text.Default: 0
CardsGroup · 9 settings
Card shapeChoiceWidth to height of each card.Options: Portrait (3:4)Tall (4:5)Story (9:16)SquareWide (16:9)Default: Portrait (3:4)
Title styleChoiceHow the title sits on the card.Options: Frosted barText on a dark fadeBelow the cardDefault: Frosted bar
Zoom on hoverOn/offThe video grows slightly while it plays.Default: On
Show a play iconOn/offA small play icon in the corner, so visitors know the card moves.Default: Off
Dim the other cardsOn/offWhile one card plays, the others fade back a little.Default: Off
Corner radiusNumberRoundness of the corners. 0 is square.Default: 24
Show borderOn/offDraws a thin border around each card.Default: Off
ShadowChoiceShadow under each card.Options: NoneSoftStrongDefault: None
Lift on hoverOn/offCards rise slightly when hovered.Default: Off
SpacingGroup · 4 settings

Leave empty to use the theme section spacing (Theme settings > Layout).

Top padding (desktop)NumberSpace above the content on desktop.
Bottom padding (desktop)NumberSpace below the content on desktop.
Top padding (mobile)NumberSpace above the content on phones.
Bottom padding (mobile)NumberSpace below the content on phones.
Animate when scrolled into viewOn/offContent fades up as the section comes into view. Visitors who turn off motion on their device see no animation.Default: On

Interface labels

Words on buttons and for screen readers. Change them to translate the module.

SettingTypeWhat it does
Turn sound onTextRead out for the speaker button while the video is muted, after the card title.Default: Turn sound on
MuteTextRead out for the speaker button while the sound is on, after the card title.Default: Mute

Tip

Headings support [brackets] to highlight words and | for a new line. See Editing tips.