TurinImageHover CSS Library
Search

Defining Custom Properties

Key variables of the CSS library can be set using (Custom Properties)[https://developer.mozilla.org/en-US/docs/Web/CSS/–*] either globally or inline within a single or selected number of elements.

Defining custom properties globally

The following example shows how custom properties can be defined globally across your project. Ensure that such CSS is loaded after the library CSS.

.c4-turin {
  --primary-color: #F6CD14;
  --secondary-color: #D0206E;
  --transition-duration: 500ms;
  --border-width: 6px;
  --overlay-opacity: .5;
}

Defining custom properties inline

This example shows how custom properties can be defined inline within a single element. These can be defined inline within the <figure or to a containing div if you wish to define properties to a group elements.

<figure class="c4-turin c4-border-center c4-gradient-top-left" style="--primary-color: #000046; --secondary-color: #1CB5E0; --border-width: 10px;">
  <img src="https://source.unsplash.com/1t8go-nyVyE/400x300" alt="Sample Image">
  <figcaption>
    <h3>
      Sample Text
    </h3>
  </figcaption>
</figure>
Sample Image

Sample Text

–text-color

  • Type: Color
  • Default: #ffffff

Defines the text color within the figcaption area.

–primary-color

  • Type: Color
  • Default: #f5af19

Defines the primary color as used on the hover image overlay.

–secondary-color

  • Type: Color
  • Default: #f12711

Defines the secondary color as used as the to value on overlay gradients.

–padding

Defines the padding of the figcaption area.

–border-radius

Defines the outside border radius of the image.

–transition-duration

  • Type: Time
  • Default: 600ms

Defines the duration of the animation on hover.

–border-margin

Defines the distance between the animated border on hover and the outside edge of the element.

–border-width

Defines the width (thickness) of the animated border on hover.

–overlay-opacity

Defines the opacity of the overlay on hover.