Image v2 - zoom effect

Synopsis: In the image v2 component, if the image is linked then there will be zoom effect on hover. The zoom animation is restricted to only desktop, as hover is not applicable for mobile devices.

Content fields:

Alternative Text , Caption, Link, ID.

Options:

Hide on Desktop Check box (Optional).

Hid on Mobile Check box (Optional).

Hide on Mobile Check box (Optional).

Image is Decorative Check box (Optional).

Display caption as pop-up Check box (Optional).

Usage: All pages.

Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.

Scenario 1

Ingredients: 2 Containers, 1 column-control- 3 Image v2 components 

This use case involves an outside container set to full width with an inner container set to contained to center align the content. Within contained width container there is column-control, The first and third image are authored with link, so there is zoom effect on hover, whereas second image is not linked therefore it doesn't have zoom effect.