Examples
Dim Text
This link will dim on hover This link will dim on hover This link will dim on hover This link will dim on hover This link will dim on hover
Dim Card
Dim any element and its children
Reveal Children on Hover
/*
HOVER EFFECTS
Put the hide-child class on a parent element and any nested element with the
child class will be hidden and displayed on hover or focus.
*/
.dim { opacity: 1; transition: opacity .15s ease-in; }
.dim:hover { opacity: .5; transition: opacity .15s ease-in; }
.dim:active,
.dim:focus { opacity: .8; transition: opacity .15s ease-out; }
.hide-child .child {
opacity: 0;
transition: opacity .15s ease-in;
}
.hide-child:hover .child,
.hide-child:focus .child,
.hide-child:active .child {
opacity: 1;
transition: opacity .15s ease-in;
}