/*
|
|
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.
|
|
<div class="hide-child">
|
<div class="child"> Hidden until hover or focus </div>
|
<div class="child"> Hidden until hover or focus </div>
|
<div class="child"> Hidden until hover or focus </div>
|
<div class="child"> Hidden until hover or focus </div>
|
</div>
|
*/
|
|
.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 );
|
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;
|
}
|
