How to Customise
Image hover elements can be customised by applying a collection of classes within the elements markup. One class can be applied from each of the following categories allowing endless possibilties to customise your Image Hover element to your own taste.
- Hover Border Animation
- Hover Image Animation
- Hover Text Animation
- Text Animation Delay
- Hover Overlay Style
- Caption Layout
Elements can be customised further by defining custom properties either globally or inline within a single or selected number of elements.
- –text-color
- –primary-color
- –secondary-color
- –padding
- –border-radius
- –transition-duration
- –border-margin
- –border-width
- –overlay-opacity
Example
<figure class="c4-turin c4-border-slide-bottom-left c4-image-zoom-out c4-gradient-bottom-right" tabindex="0" style="--primary-color: #00B4DB; --secondary-color: #0083B0;">
<img src="https://source.unsplash.com/FaPxZ88yZrw/400x300" alt="Sample Image">
<figcaption class="c4-layout-bottom-left">
<div class="c4-reveal-right">
<h4>
Creative Control
</h4>
</div>
</figcaption>
</figure>
