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
Previous
PositionNext
Background Size
/*
HOVER EFFECTS
*/
/*
Dim element on hover by adding the dim class.
*/
.dim {
opacity: 1;
transition: opacity .15s ease-in;
}
.dim:hover,
.dim:focus {
opacity: .5;
transition: opacity .15s ease-in;
}
.dim:active {
opacity: .8; transition: opacity .15s ease-out;
}
/*
Hide child on hover:
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.
*/
.hide-child .child {
opacity: 0;
transition: opacity .15s ease-in;
}
.hide-child:hover .child {
cursor: pointer;
}
.hide-child:hover .child,
.hide-child:focus .child,
.hide-child:active .child {
opacity: 1;
transition: opacity .15s ease-in;
}