Heading + Image Hover Block
The heading + image hover block allows you to create a dynamic rollover element that displays different images as you hover over various headings.
Note: For users of assistive technology, images in this kind of block should always be marked decorative and should never be used to convey important information. Please do not add “alt text” to the images used.
Example:
Heading + Image Hover!
Linked Heading
Morbi elementum ipsum velit, molestie porta felis porta at. Aliquam volutpat, libero eu blandit dictum, libero arcu facilisis elit, id auctor lorem.
Heading without link
Nullam non nisl bibendum ex condimentum consequat sed dictum odio. Donec ultricies sit amet enim id convallis. Quisque mi sem, vestibulum et sodales e
Another heading!
Integer cursus, mi ut bibendum convallis, metus ex scelerisque odio, vitae viverra erat odio tempor odio. Ut aliquam arcu ac mi interdum, eget consequ
Block Settings
Hover Block Header: This field populates an H2 at the top of the block.
Headlines + Images: The block repeater field for each heading and the associated image. Allows up to 4 items.
- Headline: Required field that populates an H3.
- URL [Optional]: Do you want the H3 to link somewhere? If you add a link, a gold arrow will display beside the heading to signify an action.
- Paragraph [Optional]: Short blurb that displays under the H3.
- Image: Select the image associated with the H3. The best size for this image is 1400px x 600px at 72dpi. Since these images are decorative, please do not add alt text.
Best Practices
- Wide and Full Widths: Wide and Full Widths will allow you to expand the block beyond the theme’s usual content width, and this block typically looks best at full width.
- Stop at Three: While the block accommodates up to 4 headlines + images, this feature looks best with around 3 items. Your image might start to crop weirdly with additional headings.