Grayscale
Quickly and easily apply a grayscale to colour hover on images.
Usage
To apply this component, just add the data-f-grayscale
attribute to a container element around a the image or images you wish to apply the component to.
Example
Markup
<div class="f-grid f-grid-collapse" data-f-grayscale="{transition:'random'}">
<a href="" title="">
<img src="..." alt="...">
</a>
<a href="" title="">
<img src="..." alt="...">
</a>
</div>
JavaScript options
Option | Possible value | Default | Description |
---|---|---|---|
transition |
fade bottomLeftSwipe bottomTopSwipe topBottomSwipe leftRightSwipe topBottomSlide bottomTopSlide bottomTopScale topBottomScale bottomLeftScale topLeftScale or random |
fade | The type of transition for the colour in |
speedIn |
integer | 200 | The speed of the transition in |
speedOut |
integer | 500 | The speed of the transition out |
limit |
integer | 768 | minimum breakpoint limit in pixels |