EXAMPLE 2
In this example we will create a hover effect by using a transition.
The Markup
1
2
3
| <div class="circle"> <h1>codrops</h1></div> |
Here we just have a container and a heading to separate the text from the rest.
The CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| .circle { background: rgb(255,255,255); border-radius: 100%; cursor: pointer; position: relative; margin: 0 auto; width: 15em; height: 15em; overflow: hidden; transform: translateZ(0);}.circle h1 { color: rgba(189, 185, 199,0); font-family: 'Lato', sans-serif; font-weight: 900; font-size: 1.6em; line-height: 8.2em; text-align: center; text-transform: uppercase; -webkit-font-smoothing: antialiased; user-select: none; transition: color 0.8s ease-in-out;}.circle:before,.circle:after { border-radius: 100%; content:""; position: absolute; top: 0; left: 0; width: inherit; height: inherit; box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2); transition: box-shadow 0.75s;}/* We rotate the :after pseudo-element to get the edge from the corner, we could also just do that with box-shadows. */.circle:after { transform: rotate(45deg);}/* There is no problem using "pseudo-class + pseudo-element" :) */.circle:hover:before,.circle:hover:after { box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);}.circle:hover > h1 { color: rgba(185, 185, 185,1);} |
You have to use only one color at a time, to avoid an unwanted mixing of colors by overlapping when triggering the hover.
