Hovers

There are several classes for adding hover effects to elements. Hover effects can be used to give visual affordance to the user that an element can be interacted with.

Examples

Dim Text

You can dim any element, including text links on hover and focus with the dim class. It will fade the element to an opacity of 50% in 150ms.

link text <a href="#" class="link dim black b">link text</a>

Dim Card

You can dim any element on hover and focus with the dim element. Not just text. Here is a card component that will dim on hover.

SF at night Card title <a href="#" class="link black dim db mw5 pa2 br2 ba b--black-10 shadow-1"> <img src="http://mrmrs.github.io/photos/037.jpg" alt="SF at night" class="db mb2 mw-100" /> <span class="db f6 pv2">Card title</span> </a>

Reveal Children on Hover

This is some card content <a href="#" style="background-image: url(http://mrmrs.github.io/images/0010.jpg); class="link mw5 dt hide-child br2 cover bg-center" "> <span class="white dtc v-mid w-100 h-100 child bg-black-40 pa5"> Card title </span> </a>

Add pointer on hover

<div href="#" class="link dim black mw5 dt hide-child ba b--black-20 pa4 br2 pointer"> Add pointer on hover to element. </div>

Grow on Hover

Using the grow class on an element will cause it to scale to 1.05% of its normal size on hover.

Portfolio Project #11 <a class="grow dib f3-ns no-underline bg-pink black-90 pa5" href="#"> Portfolio Project #11 </a>

Previous

Skins

tachyons-hovers

v2.5.2 438 B
Declarations
40
Selectors
28
Max. Specificity Score
30
Size of Avg. Rule
2.3529411764705883

Source code src/_hovers.css


/*

  HOVER EFFECTS
  Docs: http://tachyons.io/docs/themes/hovers/

    - Dim
    - Glow
    - Hide Child
    - Underline text
    - Grow
    - Pointer
    - Shadow

*/

/*

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

/*

  Animate opacity to 100% on hover by adding the glow class.

*/
.glow {
  transition: opacity .15s ease-in;
}
.glow:hover,
.glow:focus {
  opacity: 1;
  transition: opacity .15s ease-in;
}

/*

  Hide child & reveal 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.

  
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
*/ .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; } .underline-hover:hover, .underline-hover:focus { text-decoration: underline; } /* Can combine this with overflow-hidden to make background images grow on hover * even if you are using background-size: cover */ .grow { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform 0.25s ease-out; } .grow:hover, .grow:focus { transform: scale(1.05); } .grow:active { transform: scale(.90); } .grow-large { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform .25s ease-in-out; } .grow-large:hover, .grow-large:focus { transform: scale(1.2); } .grow-large:active { transform: scale(.95); } /* Add pointer on hover */ .pointer:hover { cursor: pointer; } /* Add shadow on hover. Performant box-shadow animation pattern from http://tobiasahlin.com/blog/how-to-animate-box-shadow/ */ .shadow-hover { cursor: pointer; position: relative; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .shadow-hover::after { content: ''; box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; } /* Combine with classes in skins and skins-pseudo for * many different transition possibilities. */ .bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; }