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
secondary-color custom properties. For details on changing these values either globally or locally within a single element, checkout the Custom Properties section.