Skip to content

Commit ceb3111

Browse files
author
Minh-Hoang, Nguyen
committed
add portfolio page
1 parent ae4ee13 commit ceb3111

File tree

324 files changed

+42914
-193
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

324 files changed

+42914
-193
lines changed

‎_site/assets/css/effects.css

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
@media (min-width: 1200px) {
2+
@keyframes shake {
3+
0% { transform: translate(2px, 1px) rotate(0deg); }
4+
10% { transform: translate(-1px, -2px) rotate(-1deg); }
5+
20% { transform: translate(-3px, 0px) rotate(1deg); }
6+
30% { transform: translate(0px, 2px) rotate(0deg); }
7+
40% { transform: translate(1px, -1px) rotate(1deg); }
8+
50% { transform: translate(-1px, 2px) rotate(-1deg); }
9+
60% { transform: translate(-3px, 1px) rotate(0deg); }
10+
70% { transform: translate(2px, 1px) rotate(-1deg); }
11+
80% { transform: translate(-1px, -1px) rotate(1deg); }
12+
90% { transform: translate(2px, 2px) rotate(0deg); }
13+
100% { transform: translate(1px, -2px) rotate(-1deg); }
14+
}
15+
16+
@-moz-keyframes shake{
17+
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
18+
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
19+
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
20+
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
21+
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
22+
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
23+
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
24+
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
25+
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
26+
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
27+
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
28+
}
29+
30+
@-webkit-keyframes shake {
31+
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
32+
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
33+
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
34+
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
35+
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
36+
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
37+
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
38+
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
39+
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
40+
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
41+
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
42+
}
43+
44+
.shake{
45+
display:inline-block;
46+
}
47+
48+
.shake:hover,
49+
.shake:focus{
50+
animation-name: shake;
51+
animation-duration: 0.8s;
52+
transform-origin:50% 50%;
53+
animation-iteration-count: infinite;
54+
animation-timing-function: linear;
55+
56+
-moz-animation-name: shake;
57+
-moz-animation-duration: 0.8s;
58+
-moz-transform-origin:50% 50%;
59+
-moz-animation-iteration-count: infinite;
60+
-moz-animation-timing-function: linear;
61+
62+
-webkit-animation-name: shake;
63+
-webkit-animation-duration: 0.8s;
64+
-webkit-transform-origin:50% 50%;
65+
-webkit-animation-iteration-count: infinite;
66+
-webkit-animation-timing-function: linear;
67+
}
68+
}
69+
70+
.zoomer:hover .overlay-zoom .zoom-icon{
71+
-webkit-transform: scale(1);
72+
-moz-transform: scale(1);
73+
-o-transform: scale(1);
74+
-ms-transform: scale(1);
75+
transform: scale(1);
76+
opacity:0.4;
77+
filter: alpha(opacity = 50);
78+
}
79+
80+
.overlay-zoom {
81+
cursor: pointer;
82+
width: 100%;
83+
height: 100%;
84+
position: relative;
85+
-webkit-transition: all 0.1s ease-in-out;
86+
-moz-transition: all 0.1s ease-in-out;
87+
-o-transition: all 0.1s ease-in-out;
88+
-ms-transition: all 0.1s ease-in-out;
89+
transition: all 0.1s ease-in-out;
90+
z-index: 90;
91+
}
92+
93+
.overlay-zoom .zoom-icon {
94+
background-image:url("../img/overlay-icon.png");
95+
background-color: #000;
96+
background-repeat: no-repeat;
97+
background-position: 50%;
98+
position: absolute;
99+
width: inherit;
100+
height: inherit;
101+
opacity: 0;
102+
z-index: 100;
103+
filter: alpha(opacity = 0);
104+
top:0;
105+
-webkit-transition: all 0.4s ease-in-out;
106+
-moz-transition: all 0.4s ease-in-out;
107+
-o-transition: all 0.4s ease-in-out;
108+
-ms-transition: all 0.4s ease-in-out;
109+
transition: all 0.4s ease-in-out;
110+
111+
-webkit-transform: scale(0);
112+
-moz-transform: scale(0);
113+
-o-transform: scale(0);
114+
-ms-transform: scale(0);
115+
transform: scale(0);
116+
117+
-webkit-backface-visibility: hidden;
118+
}
119+
120+
.ie7 .overlay-zoom .zoom-icon{
121+
width: 100%;
122+
height: 100%;
123+
clear: both;
124+
top:0px;
125+
left:0px;
126+
}

0 commit comments

Comments
 (0)