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-izmir 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
