Hover Overlay Style

When hovering an element an overlay is animated over the image to add styling and allow contrast for more readable text. Included is a number of classes to apply a gradient to this overlay. These gradient classes are applied to the figure tag of your element. In the following example we are applying the c4-image-zoom-in overlay style.

<figure class="c4-turin c4-gradient-top-left">
  <img src="https://source.unsplash.com/WLUHO9A_xik/400x300" alt="Sample Image">
  <figcaption>
    // Caption text
  </figcaption>
</figure>

The gradient colors are taken from the primary-color and secondary-color custom properties. For details on changing these values either globally or locally within a single element, checkout the Custom Properties section.

Available Classes

Sample Image
Sample Image
Sample Image
Sample Image
Sample Image
Sample Image
Sample Image
Sample Image