UNPKG

2.91 kBCSSView Raw
1/*
2
3 HOVER EFFECTS
4 Docs: http://tachyons.io/docs/themes/hovers/
5
6 - Dim
7 - Glow
8 - Hide Child
9 - Underline text
10 - Grow
11 - Pointer
12 - Shadow
13
14*/
15
16/*
17
18 Dim element on hover by adding the dim class.
19
20*/
21.dim {
22 opacity: 1;
23 transition: opacity .15s ease-in;
24}
25.dim:hover,
26.dim:focus {
27 opacity: .5;
28 transition: opacity .15s ease-in;
29}
30.dim:active {
31 opacity: .8; transition: opacity .15s ease-out;
32}
33
34/*
35
36 Animate opacity to 100% on hover by adding the glow class.
37
38*/
39.glow {
40 transition: opacity .15s ease-in;
41}
42.glow:hover,
43.glow:focus {
44 opacity: 1;
45 transition: opacity .15s ease-in;
46}
47
48/*
49
50 Hide child & reveal on hover:
51
52 Put the hide-child class on a parent element and any nested element with the
53 child class will be hidden and displayed on hover or focus.
54
55 <div class="hide-child">
56 <div class="child"> Hidden until hover or focus </div>
57 <div class="child"> Hidden until hover or focus </div>
58 <div class="child"> Hidden until hover or focus </div>
59 <div class="child"> Hidden until hover or focus </div>
60 </div>
61*/
62
63.hide-child .child {
64 opacity: 0;
65 transition: opacity .15s ease-in;
66}
67.hide-child:hover .child,
68.hide-child:focus .child,
69.hide-child:active .child {
70 opacity: 1;
71 transition: opacity .15s ease-in;
72}
73
74.underline-hover:hover,
75.underline-hover:focus {
76 text-decoration: underline;
77}
78
79/* Can combine this with overflow-hidden to make background images grow on hover
80 * even if you are using background-size: cover */
81
82.grow {
83 -moz-osx-font-smoothing: grayscale;
84 backface-visibility: hidden;
85 transform: translateZ(0);
86 transition: transform 0.25s ease-out;
87}
88
89.grow:hover,
90.grow:focus {
91 transform: scale(1.05);
92}
93
94.grow:active {
95 transform: scale(.90);
96}
97
98.grow-large {
99 -moz-osx-font-smoothing: grayscale;
100 backface-visibility: hidden;
101 transform: translateZ(0);
102 transition: transform .25s ease-in-out;
103}
104
105.grow-large:hover,
106.grow-large:focus {
107 transform: scale(1.2);
108}
109
110.grow-large:active {
111 transform: scale(.95);
112}
113
114/* Add pointer on hover */
115
116.pointer:hover {
117 cursor: pointer;
118}
119
120/*
121 Add shadow on hover.
122
123 Performant box-shadow animation pattern from
124 http://tobiasahlin.com/blog/how-to-animate-box-shadow/
125*/
126
127.shadow-hover {
128 cursor: pointer;
129 position: relative;
130 transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
131}
132
133.shadow-hover::after {
134 content: '';
135 box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
136 border-radius: inherit;
137 opacity: 0;
138 position: absolute;
139 top: 0;
140 left: 0;
141 width: 100%;
142 height: 100%;
143 z-index: -1;
144 transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
145}
146
147.shadow-hover:hover::after,
148.shadow-hover:focus::after {
149 opacity: 1;
150}
151
152/* Combine with classes in skins and skins-pseudo for
153 * many different transition possibilities. */
154
155.bg-animate,
156.bg-animate:hover,
157.bg-animate:focus {
158 transition: background-color .15s ease-in-out;
159}