HP.com Design System HP.com Design System HP.com Design System

Hover to Ambient

An option that can be added to an image component to play an ambient video on hover.

Usage

Surprise users with a more detailed video on hover.

Module specifications

Specs are as follows:

  • Both image and video must be same dimensions
  • Mp4s only, loaded to DAM site
  • For ambient videos, length should be 11 seconds or less, non-looping, and file should be under 2mb
  • Resolution should be 1080p 
  • Mobile limitations: choose to default to either video only, or static image.
  • Available ONLY in: Image component, custom info banner, multi-image component, large card slider, small info banner, visual tabs and step-by-step component

Character counts (with spaces)

n/a

Example layouts

Hover to see the functions of the HP Latex 800. Video will autoplay on tablet and mobile.

Hover to see the functions of the all new Z. Video will autoplay on tablet and mobile.

HP PageWide Advantage 2200

Hover to ambient option in a custom info banner

HP PageWide Advantage 2200
Hover to ambient option in a custom info banner

Video will autoplay on tablet and mobile.