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