Hover effects
However, we don't recommend that you mix hover effects with functional elements (like a drop-down on hover or hidden buttons visible only after hovering) because such an approach isn't mobile-friendly.
Coats Digital Design Language is a mobile-first framework, so we attach great importance to making each component easy to use for touch screens.
That's why our hover effects are gentle and decorative.
Basic example
Here is the most common example of hover effects usage - an image changed to link with an additional ripple effect on click.
Additionally, we added shadows and rounded corners and also changed ripple color to light via
data-mdb-attribute.
Types
There are 3 types of the hover effects in Coats Digital Design Laguage: overlay,
zoom and shadow.
Overlay
Overlay is an effect that covers with color and defined level of opacity the entire image. The same as
with mask you can change the color and opacity by manipulating RGBA code.
Our overlay hover effect relies on masks.
Add .overlay class to the .mask element to apply hover effect. Then
manipulate RGBA code to change the
color of the overlay.
Zoom
To apply zoom hover effect you have to use slightly different, but simpler syntax.
You only need to add
Shadow
Shadow hover effect is even simpler. Simply add .hover-shadow class to any element to
apply the effect.
Mixing effects
You can freely mix all the effects with each other. However, be careful not to overdo it. Coats Digital Design Language adheres to the principle of minimalism and subtlety.
Overlay over mask
If you want to put a text on the image and you need a proper contrast, but still you wish to have hover effect, you can apply overlay on the already existing mask.