Tachyons

Docs

/

Themes

/

Hover & Focus

There are two classes for adding hover effects to elements. One dims an element on hover, the other will hide children within an element on hover. The dim class can be used on links of any color to give visual affordance to users

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

KITTTTTTTY Dim any element and its children

Reveal Children on Hover

Reveal children elements on hover
src/_hovers.css

/*
  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;
}