Ajax Loader
×
HTML 
<!doctype html>
1
<!doctype html>
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
    <head>
4
        <meta charset="utf-8">
5
        <title>Magic Hover</title>
6
        <link rel="stylesheet" href="css/normalize.css">
7
 
8
        <link rel="stylesheet" href="css/magic_hover.css">
9
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
10
        <script src="js/magic_hover.js"></script>
11
 
12
        <style type="text/css">
13
            body {
14
                background: #fff;
15
            }
16
            .b-hover-layer {
17
                background: #2ecc71;
18
            }
19
            h1 {
20
                text-align: center;
21
                text-decoration: none;
22
                text-transform: none;
23
                padding-top: 30px;
24
            }
25
        </style>
26
    </head>
27
    <body>
28
        <h1>Magic Hover Demo</h1>
29
        <div class="b-wraper">
30
            <a href="#" class="b-effect b-animate2">
31
                <span class="b-text-layer b-text-align-center b-from-left"><h2>Text Header</h2></span>
32
                <img class="b-img-zoom-in5 " src="images/countryside-384624-300x187.jpg" width="300" height="187">
33
            </a>
34
            <a href="#" class="b-effect b-animate2">
35
                <span class="b-text-layer b-text-align-center b-rotate-left90"><h2>Text Header</h2></span>
36
                <span class="b-text-layer b-text-align-center b-rotate-left90" style="margin-top: 120px "><p>Text Description</p></span>
37
                <span class="b-hover-layer b-zoom-in b-size-90 b-opacity-100 b-rectangle"></span>
38
                <img class="b-img-zoom-in5 " src="images/hot-air-ballooning-436442-300x187.jpg" width="300" height="187">
39
            </a>
40
            <a href="#" class="b-effect b-animate2">
41
                <span class="b-text-layer b-text-align-center b-zoom-in"><h2>Text Header</h2></span>
42
                <span class="b-text-layer b-text-align-center b-rotate-left90" style="margin-top: 120px "><p>Text Description</p></span>
43
                <span class="b-hover-layer b-from-right b-size-80 b-opacity-100 b-circle" style="background: #9b59b6;"></span>
44
                <span class="b-hover-layer b-from-left b-size-100 b-opacity-80 b-rectangle"></span>
45
                <img class="b-img-zoom-in5 " src="images/meadow-503926-300x187.jpg" width="300" height="187">
46
            </a>
47
 
48
            <a href="#" class="b-effect b-animate2">
49
                <span class="b-text-layer b-text-align-center b-from-right"><h2>Text Header</h2></span>
50
                <img class="b-img-zoom-in10 " src="images/shopping-center-318602_1280-300x187.jpg" width="300" height="187">
51
            </a>
52
            <a href="#" class="b-effect b-animate2">
53
                <span class="b-text-layer b-text-align-center b-rotate-left180"><h2>Text Header</h2></span>
54
                <span class="b-text-layer b-text-align-center b-rotate-left180" style="margin-top: 120px "><p>Text Description</p></span>
55
                <span class="b-hover-layer b-zoom-out b-size-90 b-opacity-100 b-rectangle"></span>
56
                <img class="b-img-zoom-in10 " src="images/nates-grill-463716-300x187.jpg" width="300" height="187">
57
            </a>
58
            <a href="#" class="b-effect b-animate2">
59
                <span class="b-text-layer b-text-align-center b-zoom-out"><h2>Text Header</h2></span>
60
                <span class="b-text-layer b-text-align-center b-rotate-left90" style="margin-top: 120px "><p>Text Description</p></span>
61
                <span class="b-hover-layer b-from-left b-size-80 b-opacity-100 b-circle" style="background: #9b59b6;"></span>
62
                <span class="b-hover-layer b-from-right b-size-100 b-opacity-80 b-rectangle"></span>
63
                <img class="b-img-zoom-in10 " src="images/library-488677-300x187.jpg" width="300" height="187">
64
            </a>
65
 
66
            <a href="#" class="b-effect b-animate2">
67
                <span class="b-text-layer b-text-align-center b-from-top"><h2>Text Header</h2></span>
68
                <img class="b-img-zoom-out5 " src="images/ford-498244-300x187.jpg" width="300" height="187">
69
            </a>
70
            <a href="#" class="b-effect b-animate2">
71
                <span class="b-text-layer b-text-align-center b-rotate-right90"><h2>Text Header</h2></span>
72
                <span class="b-text-layer b-text-align-center b-rotate-right90" style="margin-top: 120px "><p>Text Description</p></span>
73
                <span class="b-hover-layer b-fade b-delay05 b-size-100 b-opacity-100 b-rectangle"></span>
74
                <img class="b-img-zoom-out5 " src="images/roof-plate-264744-300x187.jpg" width="300" height="187">
75
            </a>
76
            <a href="#" class="b-effect b-animate2">
77
                <span class="b-text-layer b-text-align-center b-fade"><h2>Text Header</h2></span>
78
                <span class="b-text-layer b-text-align-center b-rotate-right90" style="margin-top: 120px "><p>Text Description</p></span>
79
                <span class="b-hover-layer b-from-bottom b-size-80 b-opacity-100 b-circle" style="background: #9b59b6;"></span>
80
                <span class="b-hover-layer b-from-left b-size-100 b-opacity-80 b-rectangle"></span>
81
                <img class="b-img-zoom-out5 " src="images/weimaraner-143753_1280-300x187.jpg" width="300" height="187">
82
            </a>
83
 
84
            <a href="#" class="b-effect b-animate2">
85
                <span class="b-text-layer b-text-align-center b-from-bottom"><h2>Text Header</h2></span>
86
                <img class="b-img-zoom-out10 " src="images/luner-lake-475819-300x187.jpg" width="300" height="187">
87
            </a>
88
            <a href="#" class="b-effect b-animate2">
89
                <span class="b-text-layer b-text-align-center b-rotate-right180"><h2>Text Header</h2></span>
90
                <span class="b-text-layer b-text-align-center b-rotate-right180" style="margin-top: 120px "><p>Text Description</p></span>
91
                <span class="b-hover-layer b-fade b-size-100 b-opacity-80 b-rectangle"></span>
92
                <img class="b-img-zoom-out10 " src="images/mountains-482689-300x187.jpg" width="300" height="187">
93
            </a>
94
            <a href="#" class="b-effect b-animate2">
95
                <span class="b-text-layer b-text-align-center b-fade b-delay02"><h2>Text Header</h2></span>
96
                <span class="b-text-layer b-text-align-center b-rotate-right90 b-delay05" style="margin-top: 120px "><p>Text Description</p></span>
97
                <span class="b-hover-layer b-from-top b-size-80 b-opacity-100 b-circle" style="background: #9b59b6;"></span>
98
                <span class="b-hover-layer b-from-left b-size-100 b-opacity-80 b-rectangle"></span>
99
                <img class="b-img-zoom-out10 " src="images/architecture-22017_1280-300x187.jpg" width="300" height="187">
100
            </a>
101
        </div>
102
    </body>
103
</html>
104
 
105
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
1
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
2
 
3
/**
4
 * 1. Set default font family to sans-serif.
5
 * 2. Prevent iOS text size adjust after orientation change, without disabling
6
 *    user zoom.
7
 */
8
 
9
html {
10
  font-family: sans-serif; /* 1 */
11
  -ms-text-size-adjust: 100%; /* 2 */
12
  -webkit-text-size-adjust: 100%; /* 2 */
13
}
14
 
15
/**
16
 * Remove default margin.
17
 */
18
 
19
body {
20
  margin: 0;
21
}
22
 
23
/* HTML5 display definitions
24
   ========================================================================== */
25
 
26
/**
27
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
28
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
29
 * Correct `block` display not defined for `main` in IE 11.
30
 */
31
 
32
article,
33
aside,
34
details,
35
figcaption,
36
figure,
37
footer,
38
header,
39
hgroup,
40
main,
41
nav,
42
section,
43
summary {
44
  display: block;
45
}
46
 
47
/**
48
 * 1. Correct `inline-block` display not defined in IE 8/9.
49
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
50
 */
51
 
52
audio,
53
canvas,
54
progress,
55
video {
56
  display: inline-block; /* 1 */
57
  vertical-align: baseline; /* 2 */
58
}
59
 
60
/**
61
 * Prevent modern browsers from displaying `audio` without controls.
62
 * Remove excess height in iOS 5 devices.
63
 */
64
 
65
audio:not([controls]) {
66
  display: none;
67
  height: 0;
68
}
69
 
70
/**
71
 * Address `[hidden]` styling not present in IE 8/9/10.
72
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
73
 */
74
 
75
[hidden],
76
template {
77
  display: none;
78
}
79
 
80
/* Links
81
   ========================================================================== */
82
 
83
/**
84
 * Remove the gray background color from active links in IE 10.
85
 */
86
 
87
a {
88
  background: transparent;
89
}
90
 
91
/**
92
 * Improve readability when focused and also mouse hovered in all browsers.
93
 */
94
 
95
a:active,
96
a:hover {
97
  outline: 0;
98
}
99
 
100
/* Text-level semantics
101
   ========================================================================== */
102
 
103
/**
104
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
105
 */
106
 
107
abbr[title] {
108
  border-bottom: 1px dotted;
109
}
110
 
111
/**
112
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
113
 */
114
 
115
b,
116
strong {
117
  font-weight: bold;
118
}
119
 
120
/**
121
 * Address styling not present in Safari and Chrome.
122
 */
123
 
124
dfn {
125
  font-style: italic;
126
}
127
 
128
/**
129
 * Address variable `h1` font-size and margin within `section` and `article`
130
 * contexts in Firefox 4+, Safari, and Chrome.
131
 */
132
 
133
h1 {
134
  font-size: 2em;
135
  margin: 0.67em 0;
136
}
137
 
138
/**
139
 * Address styling not present in IE 8/9.
140
 */
141
 
142
mark {
143
  background: #ff0;
144
  color: #000;
145
}
146
 
147
/**
148
 * Address inconsistent and variable font size in all browsers.
149
 */
150
 
151
small {
152
  font-size: 80%;
153
}
154
 
155
/**
156
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
157
 */
158
 
159
sub,
160
sup {
161
  font-size: 75%;
162
  line-height: 0;
163
  position: relative;
164
  vertical-align: baseline;
165
}
166
 
167
sup {
168
  top: -0.5em;
169
}
170
 
171
sub {
172
  bottom: -0.25em;
173
}
174
 
175
/* Embedded content
176
   ========================================================================== */
177
 
178
/**
179
 * Remove border when inside `a` element in IE 8/9/10.
180
 */
181
 
182
img {
183
  border: 0;
184
}
185
 
186
/**
187
 * Correct overflow not hidden in IE 9/10/11.
188
 */
189
 
190
svg:not(:root) {
191
  overflow: hidden;
192
}
193
 
194
/* Grouping content
195
   ========================================================================== */
196
 
197
/**
198
 * Address margin not present in IE 8/9 and Safari.
199
 */
200
 
201
figure {
202
  margin: 1em 40px;
203
}
204
 
205
/**
206
 * Address differences between Firefox and other browsers.
207
 */
208
 
209
hr {
210
  -moz-box-sizing: content-box;
211
  box-sizing: content-box;
212
  height: 0;
213
}
214
 
215
/**
216
 * Contain overflow in all browsers.
217
 */
218
 
219
pre {
220
  overflow: auto;
221
}
222
 
223
/**
224
 * Address odd `em`-unit font size rendering in all browsers.
225
 */
226
 
227
code,
228
kbd,
229
pre,
230
samp {
231
  font-family: monospace, monospace;
232
  font-size: 1em;
233
}
234
 
235
/* Forms
236
   ========================================================================== */
237
 
238
/**
239
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
240
 * styling of `select`, unless a `border` property is set.
241
 */
242
 
243
/**
244
 * 1. Correct color not being inherited.
245
 *    Known issue: affects color of disabled elements.
246
 * 2. Correct font properties not being inherited.
247
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
248
 */
249
 
250
button,
251
input,
252
optgroup,
253
select,
254
textarea {
255
  color: inherit; /* 1 */
256
  font: inherit; /* 2 */
257
  margin: 0; /* 3 */
258
}
259
 
260
/**
261
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
262
 */
263
 
264
button {
265
  overflow: visible;
266
}
267
 
268
/**
269
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
270
 * All other form control elements do not inherit `text-transform` values.
271
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
272
 * Correct `select` style inheritance in Firefox.
273
 */
274
 
275
button,
276
select {
277
  text-transform: none;
278
}
279
 
280
/**
281
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
282
 *    and `video` controls.
283
 * 2. Correct inability to style clickable `input` types in iOS.
284
 * 3. Improve usability and consistency of cursor style between image-type
285
 *    `input` and others.
286
 */
287
 
288
button,
289
html input[type="button"], /* 1 */
290
input[type="reset"],
291
input[type="submit"] {
292
  -webkit-appearance: button; /* 2 */
293
  cursor: pointer; /* 3 */
294
}
295
 
296
/**
297
 * Re-set default cursor for disabled elements.
298
 */
299
 
300
button[disabled],
301
html input[disabled] {
302
  cursor: default;
303
}
304
 
305
/**
306
 * Remove inner padding and border in Firefox 4+.
307
 */
308
 
309
button::-moz-focus-inner,
310
input::-moz-focus-inner {
311
  border: 0;
312
  padding: 0;
313
}
314
 
315
/**
316
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
317
 * the UA stylesheet.
318
 */
319
 
320
input {
321
  line-height: normal;
322
}
323
 
324
/**
325
 * It's recommended that you don't attempt to style these elements.
326
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
327
 *
328
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
329
 * 2. Remove excess padding in IE 8/9/10.
330
 */
331
 
332
input[type="checkbox"],
333
input[type="radio"] {
334
  box-sizing: border-box; /* 1 */
335
  padding: 0; /* 2 */
336
}
337
 
338
/**
339
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
340
 * `font-size` values of the `input`, it causes the cursor style of the
341
 * decrement button to change from `default` to `text`.
342
 */
343
 
344
input[type="number"]::-webkit-inner-spin-button,
345
input[type="number"]::-webkit-outer-spin-button {
346
  height: auto;
347
}
348
 
349
/**
350
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
351
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
352
 *    (include `-moz` to future-proof).
353
 */
354
 
355
input[type="search"] {
356
  -webkit-appearance: textfield; /* 1 */
357
  -moz-box-sizing: content-box;
358
  -webkit-box-sizing: content-box; /* 2 */
359
  box-sizing: content-box;
360
}
361
 
362
/**
363
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
364
 * Safari (but not Chrome) clips the cancel button when the search input has
365
 * padding (and `textfield` appearance).
366
 */
367
 
368
input[type="search"]::-webkit-search-cancel-button,
369
input[type="search"]::-webkit-search-decoration {
370
  -webkit-appearance: none;
371
}
372
 
373
/**
374
 * Define consistent border, margin, and padding.
375
 */
376
 
377
fieldset {
378
  border: 1px solid #c0c0c0;
379
  margin: 0 2px;
380
  padding: 0.35em 0.625em 0.75em;
381
}
382
 
383
/**
384
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
385
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
386
 */
387
 
388
legend {
389
  border: 0; /* 1 */
390
  padding: 0; /* 2 */
391
}
392
 
393
/**
394
 * Remove default vertical scrollbar in IE 8/9/10/11.
395
 */
396
 
397
textarea {
398
  overflow: auto;
399
}
400
 
401
/**
402
 * Don't inherit the `font-weight` (applied by a rule above).
403
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
404
 */
405
 
406
optgroup {
407
  font-weight: bold;
408
}
409
 
410
/* Tables
411
   ========================================================================== */
412
 
413
/**
414
 * Remove most spacing between table cells.
415
 */
416
 
417
table {
418
  border-collapse: collapse;
419
  border-spacing: 0;
420
}
421
 
422
td,
423
th {
424
  padding: 0;
425
}
426
 
427
 
428
/* DEAFAUL CSS */
429
h1 {
430
  font-size: 20px;
431
  font-weight: bold;
432
  text-transform: uppercase;
433
  padding-top: 100px;
434
  text-decoration: underline;
435
  padding-bottom: 7px;
436
  margin-bottom: 20px;
437
}
438
 
439
p {
440
  font-size: 14px;
441
}
442
 
443
.b-wraper {
444
  width: 960px;
445
  margin: auto;
446
  padding-bottom: 30px;
447
}
448
 
449
.b-effect {
450
  position: relative;
451
  display: inline-block;
452
  overflow: hidden;
453
}
454
 
455
.b-effect * {
456
  display: block;
457
  box-sizing: border-box;
458
  -moz-box-sizing: border-box;
459
  -ms-box-sizing: border-box;
460
  -o-box-sizing: border-box;
461
  -webkit-box-sizing: border-box;
462
}
463
 
464
.b-effect img {
465
  position: relative;
466
  z-index: 0;
467
}
468
 
469
.b-hover-layer {
470
  position: absolute;
471
  left: 0;
472
  top: 0;
473
  right: 0;
474
  bottom: 0;
475
  z-index: 1;
476
}
477
 
478
.b-rectangle {
479
  position: absolute;
480
  left: 0;
481
  top: 0;
482
  right: 0;
483
  bottom: 0;
484
  z-index: 1;
485
}
486
 
487
.b-circle {
488
  border-radius: 50%;
489
  -moz-border-radius: 50%;
490
  -ms-border-radius: 50%;
491
  -o-border-radius: 50%;
492
  -webkit-border-radius: 50%;
493
  margin: auto;
494
}
495
 
496
.b-text-layer {
497
  position: absolute;
498
  left: 0;
499
  top: 0;
500
  right: 0;
501
  bottom: 0;
502
  z-index: 2;
503
  color: #fff;
504
}
505
 
506
.b-effect .b-hover-layer {
507
  visibility: hidden;
508
}
509
 
510
.b-effect:hover .b-hover-layer {
511
  visibility: visible;
512
}
513
 
514
/**********
515
**
516
** EFFECTS
517
**
518
**********/
519
 
520
/*
521
** ALIGN
522
*/
523
 
524
.b-text-align-left {
525
  text-align: left;
526
}
527
 
528
.b-text-align-right {
529
  text-align: right;
530
}
531
 
532
.b-text-align-center {
533
  text-align: center;
534
}
535
 
536
/*
537
** SLIDE
538
*/
539
 
540
.b-from-left, .b-from-right, .b-from-top, .b-from-bottom {
541
  transition-duration: 0.25s;
542
  -moz-transition-duration: 0.25s;
543
  -transition-duration: 0.25s;
544
  -o-transition-duration: 0.25s;
545
  -webkit-transition-duration: 0.25s;
546
  transition-property: all;
547
  -moz-transition-property: all;
548
  -ms-transition-property: all;
549
  -o-transition-property: all;
550
  -webkit-transition-property: all;
551
}
552
 
553
.b-from-left {
554
  transform: translateX(-100%);
555
  -moz-transform: translateX(-100%);
556
  -ms-transform: translateX(-100%);
557
  -o-transform: translateX(-100%);
558
  -webkit-transform: translateX(-100%);
559
}
560
 
561
.b-from-right {
562
  transform: translateX(100%);
563
  -moz-transform: translateX(100%);
564
  -ms-transform: translateX(100%);
565
  -o-transform: translateX(100%);
566
  -webkit-transform: translateX(100%);
567
}
568
 
569
.b-from-top {
570
  transform: translateY(-100%);
571
  -moz-transform: translateY(-100%);
572
  -ms-transform: translateY(-100%);
573
  -o-transform: translateY(-100%);
574
  -webkit-transform: translateY(-100%);
575
}
576
 
577
.b-from-bottom {
578
  transform: translateY(100%);
579
  -moz-transform: translateY(100%);
580
  -ms-transform: translateY(100%);
581
  -o-transform: translateY(100%);
582
  -webkit-transform: translateY(100%);
583
}
584
 
585
.b-hover .b-from-left,
586
.b-effect:hover .b-from-left,
587
.b-hover .b-from-right,
588
.b-effect:hover .b-from-right {
589
  transform: translateX(0);
590
  -moz-transform: translateX(0);
591
  -ms-transform: translateX(0);
592
  -o-transform: translateX(0);
593
  -webkit-transform: translateX(0);
594
}
595
 
596
.b-hover .b-from-top,
597
.b-effect:hover .b-from-top,
598
.b-hover .b-from-bottom,
599
.b-effect:hover .b-from-bottom {
600
  transform: translateY(0);
601
  -moz-transform: translateY(0);
602
  -ms-transform: translateY(0);
603
  -o-transform: translateY(0);
604
  -webkit-transform: translateY(0);
605
}
606
 
607
/*
608
** SIZE
609
*/
610
 
611
.b-size-100 {
612
  transform: scale(1, 1);
613
  -moz-transform: scale(1, 1);
614
  -ms-transform: scale(1, 1);
615
  -o-transform: scale(1, 1);
616
  -webkit-transform: scale(1, 1);
617
}
618
 
619
.b-size-90 {
620
  transform: scale(0.9, 0.9);
621
  -moz-transform: scale(0.9, 0.9);
622
  -ms-transform: scale(0.9, 0.9);
623
  -o-transform: scale(0.9, 0.9);
624
  -webkit-transform: scale(0.9, 0.9);
625
}
626
 
627
.b-size-80 {
628
  transform: scale(0.8, 0.8);
629
  -moz-transform: scale(0.8, 0.8);
630
  -ms-transform: scale(0.8, 0.8);
631
  -o-transform: scale(0.8, 0.8);
632
  -webkit-transform: scale(0.8, 0.8);
633
}
634
 
635
.b-size-70 {
636
  transform: scale(0.7, 0.7);
637
  -moz-transform: scale(0.7, 0.7);
638
  -ms-transform: scale(0.7, 0.7);
639
  -o-transform: scale(0.7, 0.7);
640
  -webkit-transform: scale(0.7, 0.7);
641
}
642
 
643
.b-size-60 {
644
  transform: scale(0.6, 0.6);
645
  -moz-transform: scale(0.6, 0.6);
646
  -ms-transform: scale(0.6, 0.6);
647
  -o-transform: scale(0.6, 0.6);
648
  -webkit-transform: scale(0.6, 0.6);
649
}
650
 
651
.b-size-50 {
652
  transform: scale(0.5, 0.5);
653
  -moz-transform: scale(0.5, 0.5);
654
  -ms-transform: scale(0.5, 0.5);
655
  -o-transform: scale(0.5, 0.5);
656
  -webkit-transform: scale(0.5, 0.5);
657
}
658
 
659
/*
660
** SLIDE + SIZE
661
*/
662
 
663
.b-from-left.b-size-100 {
664
  transform: translateX(-100%) scale(1, 1);
665
  -moz-transform: translateX(-100%) scale(1, 1);
666
  -ms-transform: translateX(-100%) scale(1, 1);
667
  -o-transform: translateX(-100%) scale(1, 1);
668
  -webkit-transform: translateX(-100%) scale(1, 1);
669
}
670
 
671
.b-hover .b-from-left.b-size-100,
672
.b-effect:hover .b-from-left.b-size-100 {
673
  transform: translateX(0) scale(1, 1);
674
  -moz-transform: translateX(0) scale(1, 1);
675
  -ms-transform: translateX(0) scale(1, 1);
676
  -o-transform: translateX(0) scale(1, 1);
677
  -webkit-transform: translateX(0) scale(1, 1);
678
}
679
 
680
.b-from-left.b-size-90 {
681
  transform: translateX(-100%) scale(0.9, 0.9);
682
  -moz-transform: translateX(-100%) scale(0.9, 0.9);
683
  -ms-transform: translateX(-100%) scale(0.9, 0.9);
684
  -o-transform: translateX(-100%) scale(0.9, 0.9);
685
  -webkit-transform: translateX(-100%) scale(0.9, 0.9);
686
}
687
 
688
.b-hover .b-from-left.b-size-90,
689
.b-effect:hover .b-from-left.b-size-90 {
690
  transform: translateX(0) scale(0.9, 0.9);
691
  -moz-transform: translateX(0) scale(0.9, 0.9);
692
  -ms-transform: translateX(0) scale(0.9, 0.9);
693
  -o-transform: translateX(0) scale(0.9, 0.9);
694
  -webkit-transform: translateX(0) scale(0.9, 0.9);
695
}
696
 
697
.b-from-left.b-size-80 {
698
  transform: translateX(-100%) scale(0.8, 0.8);
699
  -moz-transform: translateX(-100%) scale(0.8, 0.8);
700
  -ms-transform: translateX(-100%) scale(0.8, 0.8);
701
  -o-transform: translateX(-100%) scale(0.8, 0.8);
702
  -webkit-transform: translateX(-100%) scale(0.8, 0.8);
703
}
704
 
705
.b-hover .b-from-left.b-size-80,
706
.b-effect:hover .b-from-left.b-size-80 {
707
  transform: translateX(0) scale(0.8, 0.8);
708
  -moz-transform: translateX(0) scale(0.8, 0.8);
709
  -ms-transform: translateX(0) scale(0.8, 0.8);
710
  -o-transform: translateX(0) scale(0.8, 0.8);
711
  -webkit-transform: translateX(0) scale(0.8, 0.8);
712
}
713
 
714
.b-from-left.b-size-70 {
715
  transform: translateX(-100%) scale(0.7, 0.7);
716
  -moz-transform: translateX(-100%) scale(0.7, 0.7);
717
  -ms-transform: translateX(-100%) scale(0.7, 0.7);
718
  -o-transform: translateX(-100%) scale(0.7, 0.7);
719
  -webkit-transform: translateX(-100%) scale(0.7, 0.7);
720
}
721
 
722
.b-hover .b-from-left.b-size-70,
723
.b-effect:hover .b-from-left.b-size-70 {
724
  transform: translateX(0) scale(0.7, 0.7);
725
  -moz-transform: translateX(0) scale(0.7, 0.7);
726
  -ms-transform: translateX(0) scale(0.7, 0.7);
727
  -o-transform: translateX(0) scale(0.7, 0.7);
728
  -webkit-transform: translateX(0) scale(0.7, 0.7);
729
}
730
 
731
.b-from-left.b-size-60 {
732
  transform: translateX(-100%) scale(0.6, 0.6);
733
  -moz-transform: translateX(-100%) scale(0.6, 0.6);
734
  -ms-transform: translateX(-100%) scale(0.6, 0.6);
735
  -o-transform: translateX(-100%) scale(0.6, 0.6);
736
  -webkit-transform: translateX(-100%) scale(0.6, 0.6);
737
}
738
 
739
.b-hover .b-from-left.b-size-60,
740
.b-effect:hover .b-from-left.b-size-60 {
741
  transform: translateX(0) scale(0.6, 0.6);
742
  -moz-transform: translateX(0) scale(0.6, 0.6);
743
  -ms-transform: translateX(0) scale(0.6, 0.6);
744
  -o-transform: translateX(0) scale(0.6, 0.6);
745
  -webkit-transform: translateX(0) scale(0.6, 0.6);
746
}
747
 
748
.b-from-left.b-size-50 {
749
  transform: translateX(-100%) scale(0.5, 0.5);
750
  -moz-transform: translateX(-100%) scale(0.5, 0.5);
751
  -ms-transform: translateX(-100%) scale(0.5, 0.5);
752
  -o-transform: translateX(-100%) scale(0.5, 0.5);
753
  -webkit-transform: translateX(-100%) scale(0.5, 0.5);
754
}
755
 
756
.b-hover .b-from-left.b-size-50,
757
.b-effect:hover .b-from-left.b-size-50 {
758
  transform: translateX(0) scale(0.5, 0.5);
759
  -moz-transform: translateX(0) scale(0.5, 0.5);
760
  -ms-transform: translateX(0) scale(0.5, 0.5);
761
  -o-transform: translateX(0) scale(0.5, 0.5);
762
  -webkit-transform: translateX(0) scale(0.5, 0.5);
763
}
764
 
765
.b-from-right.b-size-100 {
766
  transform: translateX(100%) scale(1, 1);
767
  -moz-transform: translateX(100%) scale(1, 1);
768
  -ms-transform: translateX(100%) scale(1, 1);
769
  -o-transform: translateX(100%) scale(1, 1);
770
  -webkit-transform: translateX(100%) scale(1, 1);
771
}
772
 
773
.b-hover .b-from-right.b-size-100,
774
.b-effect:hover .b-from-right.b-size-100 {
775
  transform: translateX(0) scale(1, 1);
776
  -moz-transform: translateX(0) scale(1, 1);
777
  -ms-transform: translateX(0) scale(1, 1);
778
  -o-transform: translateX(0) scale(1, 1);
779
  -webkit-transform: translateX(0) scale(1, 1);
780
}
781
 
782
.b-from-right.b-size-90 {
783
  transform: translateX(100%) scale(0.9, 0.9);
784
  -moz-transform: translateX(100%) scale(0.9, 0.9);
785
  -ms-transform: translateX(100%) scale(0.9, 0.9);
786
  -o-transform: translateX(100%) scale(0.9, 0.9);
787
  -webkit-transform: translateX(100%) scale(0.9, 0.9);
788
}
789
 
790
.b-hover .b-from-right.b-size-90,
791
.b-effect:hover .b-from-right.b-size-90 {
792
  transform: translateX(0) scale(0.9, 0.9);
793
  -moz-transform: translateX(0) scale(0.9, 0.9);
794
  -ms-transform: translateX(0) scale(0.9, 0.9);
795
  -o-transform: translateX(0) scale(0.9, 0.9);
796
  -webkit-transform: translateX(0) scale(0.9, 0.9);
797
}
798
 
799
.b-from-right.b-size-80 {
800
  transform: translateX(100%) scale(0.8, 0.8);
801
  -moz-transform: translateX(100%) scale(0.8, 0.8);
802
  -ms-transform: translateX(100%) scale(0.8, 0.8);
803
  -o-transform: translateX(100%) scale(0.8, 0.8);
804
  -webkit-transform: translateX(100%) scale(0.8, 0.8);
805
}
806
 
807
.b-hover .b-from-right.b-size-80,
808
.b-effect:hover .b-from-right.b-size-80 {
809
  transform: translateX(0) scale(0.8, 0.8);
810
  -moz-transform: translateX(0) scale(0.8, 0.8);
811
  -ms-transform: translateX(0) scale(0.8, 0.8);
812
  -o-transform: translateX(0) scale(0.8, 0.8);
813
  -webkit-transform: translateX(0) scale(0.8, 0.8);
814
}
815
 
816
.b-from-right.b-size-70 {
817
  transform: translateX(100%) scale(0.7, 0.7);
818
  -moz-transform: translateX(100%) scale(0.7, 0.7);
819
  -ms-transform: translateX(100%) scale(0.7, 0.7);
820
  -o-transform: translateX(100%) scale(0.7, 0.7);
821
  -webkit-transform: translateX(100%) scale(0.7, 0.7);
822
}
823
 
824
.b-hover .b-from-right.b-size-70,
825
.b-effect:hover .b-from-right.b-size-70 {
826
  transform: translateX(0) scale(0.7, 0.7);
827
  -moz-transform: translateX(0) scale(0.7, 0.7);
828
  -ms-transform: translateX(0) scale(0.7, 0.7);
829
  -o-transform: translateX(0) scale(0.7, 0.7);
830
  -webkit-transform: translateX(0) scale(0.7, 0.7);
831
}
832
 
833
.b-from-right.b-size-60 {
834
  transform: translateX(100%) scale(0.6, 0.6);
835
  -moz-transform: translateX(100%) scale(0.6, 0.6);
836
  -ms-transform: translateX(100%) scale(0.6, 0.6);
837
  -o-transform: translateX(100%) scale(0.6, 0.6);
838
  -webkit-transform: translateX(100%) scale(0.6, 0.6);
839
}
840
 
841
.b-hover .b-from-right.b-size-60,
842
.b-effect:hover .b-from-right.b-size-60 {
843
  transform: translateX(0) scale(0.6, 0.6);
844
  -moz-transform: translateX(0) scale(0.6, 0.6);
845
  -ms-transform: translateX(0) scale(0.6, 0.6);
846
  -o-transform: translateX(0) scale(0.6, 0.6);
847
  -webkit-transform: translateX(0) scale(0.6, 0.6);
848
}
849
 
850
.b-from-right.b-size-50 {
851
  transform: translateX(100%) scale(0.5, 0.5);
852
  -moz-transform: translateX(100%) scale(0.5, 0.5);
853
  -ms-transform: translateX(100%) scale(0.5, 0.5);
854
  -o-transform: translateX(100%) scale(0.5, 0.5);
855
  -webkit-transform: translateX(100%) scale(0.5, 0.5);
856
}
857
 
858
.b-hover .b-from-right.b-size-50,
859
.b-effect:hover .b-from-right.b-size-50 {
860
  transform: translateX(0) scale(0.5, 0.5);
861
  -moz-transform: translateX(0) scale(0.5, 0.5);
862
  -ms-transform: translateX(0) scale(0.5, 0.5);
863
  -o-transform: translateX(0) scale(0.5, 0.5);
864
  -webkit-transform: translateX(0) scale(0.5, 0.5);
865
}
866
 
867
.b-from-top.b-size-100 {
868
  transform: translateY(-100%) scale(1, 1);
869
  -moz-transform: translateY(-100%) scale(1, 1);
870
  -ms-transform: translateY(-100%) scale(1, 1);
871
  -o-transform: translateY(-100%) scale(1, 1);
872
  -webkit-transform: translateY(-100%) scale(1, 1);
873
}
874
 
875
.b-hover .b-from-top.b-size-100,
876
.b-effect:hover .b-from-top.b-size-100 {
877
  transform: translateY(0) scale(1, 1);
878
  -moz-transform: translateY(0) scale(1, 1);
879
  -ms-transform: translateY(0) scale(1, 1);
880
  -o-transform: translateY(0) scale(1, 1);
881
  -webkit-transform: translateY(0) scale(1, 1);
882
}
883
 
884
.b-from-top.b-size-90 {
885
  transform: translateY(-100%) scale(0.9, 0.9);
886
  -moz-transform: translateY(-100%) scale(0.9, 0.9);
887
  -ms-transform: translateY(-100%) scale(0.9, 0.9);
888
  -o-transform: translateY(-100%) scale(0.9, 0.9);
889
  -webkit-transform: translateY(-100%) scale(0.9, 0.9);
890
}
891
 
892
.b-hover .b-from-top.b-size-90,
893
.b-effect:hover .b-from-top.b-size-90 {
894
  transform: translateY(0) scale(0.9, 0.9);
895
  -moz-transform: translateY(0) scale(0.9, 0.9);
896
  -ms-transform: translateY(0) scale(0.9, 0.9);
897
  -o-transform: translateY(0) scale(0.9, 0.9);
898
  -webkit-transform: translateY(0) scale(0.9, 0.9);
899
}
900
 
901
.b-from-top.b-size-80 {
902
  transform: translateY(-100%) scale(0.8, 0.8);
903
  -moz-transform: translateY(-100%) scale(0.8, 0.8);
904
  -ms-transform: translateY(-100%) scale(0.8, 0.8);
905
  -o-transform: translateY(-100%) scale(0.8, 0.8);
906
  -webkit-transform: translateY(-100%) scale(0.8, 0.8);
907
}
908
 
909
.b-hover .b-from-top.b-size-80,
910
.b-effect:hover .b-from-top.b-size-80 {
911
  transform: translateY(0) scale(0.8, 0.8);
912
  -moz-transform: translateY(0) scale(0.8, 0.8);
913
  -ms-transform: translateY(0) scale(0.8, 0.8);
914
  -o-transform: translateY(0) scale(0.8, 0.8);
915
  -webkit-transform: translateY(0) scale(0.8, 0.8);
916
}
917
 
918
.b-from-top.b-size-70 {
919
  transform: translateY(-100%) scale(0.7, 0.7);
920
  -moz-transform: translateY(-100%) scale(0.7, 0.7);
921
  -ms-transform: translateY(-100%) scale(0.7, 0.7);
922
  -o-transform: translateY(-100%) scale(0.7, 0.7);
923
  -webkit-transform: translateY(-100%) scale(0.7, 0.7);
924
}
925
 
926
.b-hover .b-from-top.b-size-70,
927
.b-effect:hover .b-from-top.b-size-70 {
928
  transform: translateY(0) scale(0.7, 0.7);
929
  -moz-transform: translateY(0) scale(0.7, 0.7);
930
  -ms-transform: translateY(0) scale(0.7, 0.7);
931
  -o-transform: translateY(0) scale(0.7, 0.7);
932
  -webkit-transform: translateY(0) scale(0.7, 0.7);
933
}
934
 
935
.b-from-top.b-size-60 {
936
  transform: translateY(-100%) scale(0.6, 0.6);
937
  -moz-transform: translateY(-100%) scale(0.6, 0.6);
938
  -ms-transform: translateY(-100%) scale(0.6, 0.6);
939
  -o-transform: translateY(-100%) scale(0.6, 0.6);
940
  -webkit-transform: translateY(-100%) scale(0.6, 0.6);
941
}
942
 
943
.b-hover .b-from-top.b-size-60,
944
.b-effect:hover .b-from-top.b-size-60 {
945
  transform: translateY(0) scale(0.6, 0.6);
946
  -moz-transform: translateY(0) scale(0.6, 0.6);
947
  -ms-transform: translateY(0) scale(0.6, 0.6);
948
  -o-transform: translateY(0) scale(0.6, 0.6);
949
  -webkit-transform: translateY(0) scale(0.6, 0.6);
950
}
951
 
952
.b-from-top.b-size-50 {
953
  transform: translateY(-100%) scale(0.5, 0.5);
954
  -moz-transform: translateY(-100%) scale(0.5, 0.5);
955
  -ms-transform: translateY(-100%) scale(0.5, 0.5);
956
  -o-transform: translateY(-100%) scale(0.5, 0.5);
957
  -webkit-transform: translateY(-100%) scale(0.5, 0.5);
958
}
959
 
960
.b-hover .b-from-top.b-size-50,
961
.b-effect:hover .b-from-top.b-size-50 {
962
  transform: translateY(0) scale(0.5, 0.5);
963
  -moz-transform: translateY(0) scale(0.5, 0.5);
964
  -ms-transform: translateY(0) scale(0.5, 0.5);
965
  -o-transform: translateY(0) scale(0.5, 0.5);
966
  -webkit-transform: translateY(0) scale(0.5, 0.5);
967
}
968
 
969
.b-from-bottom.b-size-100 {
970
  transform: translateY(100%) scale(1, 1);
971
  -moz-transform: translateY(100%) scale(1, 1);
972
  -ms-transform: translateY(100%) scale(1, 1);
973
  -o-transform: translateY(100%) scale(1, 1);
974
  -webkit-transform: translateY(100%) scale(1, 1);
975
}
976
 
977
.b-hover .b-from-bottom.b-size-100,
978
.b-effect:hover .b-from-bottom.b-size-100 {
979
  transform: translateY(0) scale(1, 1);
980
  -moz-transform: translateY(0) scale(1, 1);
981
  -ms-transform: translateY(0) scale(1, 1);
982
  -o-transform: translateY(0) scale(1, 1);
983
  -webkit-transform: translateY(0) scale(1, 1);
984
}
985
 
986
.b-from-bottom.b-size-90 {
987
  transform: translateY(100%) scale(0.9, 0.9);
988
  -moz-transform: translateY(100%) scale(0.9, 0.9);
989
  -ms-transform: translateY(100%) scale(0.9, 0.9);
990
  -o-transform: translateY(100%) scale(0.9, 0.9);
991
  -webkit-transform: translateY(100%) scale(0.9, 0.9);
992
}
993
 
994
.b-hover .b-from-bottom.b-size-90,
995
.b-effect:hover .b-from-bottom.b-size-90 {
996
  transform: translateY(0) scale(0.9, 0.9);
997
  -moz-transform: translateY(0) scale(0.9, 0.9);
998
  -ms-transform: translateY(0) scale(0.9, 0.9);
999
  -o-transform: translateY(0) scale(0.9, 0.9);
1000
  -webkit-transform: translateY(0) scale(0.9, 0.9);
1001
}
1002
 
1003
.b-from-bottom.b-size-80 {
1004
  transform: translateY(100%) scale(0.8, 0.8);
1005
  -moz-transform: translateY(100%) scale(0.8, 0.8);
1006
  -ms-transform: translateY(100%) scale(0.8, 0.8);
1007
  -o-transform: translateY(100%) scale(0.8, 0.8);
1008
  -webkit-transform: translateY(100%) scale(0.8, 0.8);
1009
}
1010
 
1011
.b-hover .b-from-bottom.b-size-80,
1012
.b-effect:hover .b-from-bottom.b-size-80 {
1013
  transform: translateY(0) scale(0.8, 0.8);
1014
  -moz-transform: translateY(0) scale(0.8, 0.8);
1015
  -ms-transform: translateY(0) scale(0.8, 0.8);
1016
  -o-transform: translateY(0) scale(0.8, 0.8);
1017
  -webkit-transform: translateY(0) scale(0.8, 0.8);
1018
}
1019
 
1020
.b-from-bottom.b-size-70 {
1021
  transform: translateY(100%) scale(0.7, 0.7);
1022
  -moz-transform: translateY(100%) scale(0.7, 0.7);
1023
  -ms-transform: translateY(100%) scale(0.7, 0.7);
1024
  -o-transform: translateY(100%) scale(0.7, 0.7);
1025
  -webkit-transform: translateY(100%) scale(0.7, 0.7);
1026
}
1027
 
1028
.b-hover .b-from-bottom.b-size-70,
1029
.b-effect:hover .b-from-bottom.b-size-70 {
1030
  transform: translateY(0) scale(0.7, 0.7);
1031
  -moz-transform: translateY(0) scale(0.7, 0.7);
1032
  -ms-transform: translateY(0) scale(0.7, 0.7);
1033
  -o-transform: translateY(0) scale(0.7, 0.7);
1034
  -webkit-transform: translateY(0) scale(0.7, 0.7);
1035
}
1036
 
1037
.b-from-bottom.b-size-60 {
1038
  transform: translateY(100%) scale(0.6, 0.6);
1039
  -moz-transform: translateY(100%) scale(0.6, 0.6);
1040
  -ms-transform: translateY(100%) scale(0.6, 0.6);
1041
  -o-transform: translateY(100%) scale(0.6, 0.6);
1042
  -webkit-transform: translateY(100%) scale(0.6, 0.6);
1043
}
1044
 
1045
.b-hover .b-from-bottom.b-size-60,
1046
.b-effect:hover .b-from-bottom.b-size-60 {
1047
  transform: translateY(0) scale(0.6, 0.6);
1048
  -moz-transform: translateY(0) scale(0.6, 0.6);
1049
  -ms-transform: translateY(0) scale(0.6, 0.6);
1050
  -o-transform: translateY(0) scale(0.6, 0.6);
1051
  -webkit-transform: translateY(0) scale(0.6, 0.6);
1052
}
1053
 
1054
.b-from-bottom.b-size-50 {
1055
  transform: translateY(100%) scale(0.5, 0.5);
1056
  -moz-transform: translateY(100%) scale(0.5, 0.5);
1057
  -ms-transform: translateY(100%) scale(0.5, 0.5);
1058
  -o-transform: translateY(100%) scale(0.5, 0.5);
1059
  -webkit-transform: translateY(100%) scale(0.5, 0.5);
1060
}
1061
 
1062
.b-hover .b-from-bottom.b-size-50,
1063
.b-effect:hover .b-from-bottom.b-size-50 {
1064
  transform: translateY(0) scale(0.5, 0.5);
1065
  -moz-transform: translateY(0) scale(0.5, 0.5);
1066
  -ms-transform: translateY(0) scale(0.5, 0.5);
1067
  -o-transform: translateY(0) scale(0.5, 0.5);
1068
  -webkit-transform: translateY(0) scale(0.5, 0.5);
1069
}
1070
 
1071
/*
1072
** ROTATE
1073
*/
1074
 
1075
.b-rotate-left90, .b-rotate-left180, .b-rotate-right90, .b-rotate-right180 {
1076
  transition-duration: 0.25s;
1077
  -moz-transition-duration: 0.25s;
1078
  -transition-duration: 0.25s;
1079
  -o-transition-duration: 0.25s;
1080
  -webkit-transition-duration: 0.25s;
1081
  transition-property: all;
1082
  -moz-transition-property: all;
1083
  -ms-transition-property: all;
1084
  -o-transition-property: all;
1085
  -webkit-transition-property: all;
1086
  opacity: 0;
1087
}
1088
 
1089
.b-rotate-left90 {
1090
  transform: rotate(90deg);
1091
  -moz-transform: rotate(90deg);
1092
  -ms-transform: rotate(90deg);
1093
  -o-transform: rotate(90deg);
1094
  -webkit-transform: rotate(90deg);
1095
}
1096
 
1097
.b-rotate-left180 {
1098
  transform: rotate(180deg);
1099
  -moz-transform: rotate(180deg);
1100
  -ms-transform: rotate(180deg);
1101
  -o-transform: rotate(180deg);
1102
  -webkit-transform: rotate(180deg);
1103
}
1104
 
1105
.b-rotate-right90 {
1106
  transform: rotate(-90deg);
1107
  -moz-transform: rotate(-90deg);
1108
  -ms-transform: rotate(-90deg);
1109
  -o-transform: rotate(-90deg);
1110
  -webkit-transform: rotate(-90deg);
1111
}
1112
 
1113
.b-rotate-right180 {
1114
  transform: rotate(-180deg);
1115
  -moz-transform: rotate(-180deg);
1116
  -ms-transform: rotate(-180deg);
1117
  -o-transform: rotate(-180deg);
1118
  -webkit-transform: rotate(-180deg);
1119
}
1120
 
1121
.b-hover .b-rotate-left90,
1122
.b-hover .b-rotate-left180,
1123
.b-hover .b-rotate-right90,
1124
.b-hover .b-rotate-right180,
1125
.b-effect:hover .b-rotate-left90,
1126
.b-effect:hover .b-rotate-left180,
1127
.b-effect:hover .b-rotate-right90,
1128
.b-effect:hover .b-rotate-right180 {
1129
  transform: rotate(0);
1130
  -moz-transform: rotate(0);
1131
  -ms-transform: rotate(0);
1132
  -o-transform: rotate(0);
1133
  -webkit-transform: rotate(0);
1134
  opacity: 1;
1135
}
1136
 
1137
/*
1138
** SLIDE + ROTATE
1139
*/
1140
 
1141
.b-from-left.b-rotate-left90 {
1142
  transform: rotate(90deg) translateY(100%);
1143
  -moz-transform: rotate(90deg) translateY(100%);
1144
  -ms-transform: rotate(90deg) translateY(100%);
1145
  -o-transform: rotate(90deg) translateY(100%);
1146
  -webkit-transform: rotate(90deg) translateY(100%);
1147
}
1148
 
1149
.b-from-left.b-rotate-left180 {
1150
  transform: rotate(180deg) translateX(100%);
1151
  -moz-transform: rotate(180deg) translateX(100%);
1152
  -ms-transform: rotate(180deg) translateX(100%);
1153
  -o-transform: rotate(180deg) translateX(100%);
1154
  -webkit-transform: rotate(180deg) translateX(100%);
1155
}
1156
 
1157
.b-from-left.b-rotate-right90 {
1158
  transform: rotate(-90deg) translateY(-100%);
1159
  -moz-transform: rotate(-90deg) translateY(-100%);
1160
  -ms-transform: rotate(-90deg) translateY(-100%);
1161
  -o-transform: rotate(-90deg) translateY(-100%);
1162
  -webkit-transform: rotate(-90deg) translateY(-100%);
1163
}
1164
 
1165
.b-from-left.b-rotate-right180 {
1166
  transform: rotate(-180deg) translateX(100%);
1167
  -moz-transform: rotate(-180deg) translateX(100%);
1168
  -ms-transform: rotate(-180deg) translateX(100%);
1169
  -o-transform: rotate(-180deg) translateX(100%);
1170
  -webkit-transform: rotate(-180deg) translateX(100%);
1171
}
1172
 
1173
.b-from-right.b-rotate-left90 {
1174
  transform: rotate(90deg) translateY(-100%);
1175
  -moz-transform: rotate(90deg) translateY(-100%);
1176
  -ms-transform: rotate(90deg) translateY(-100%);
1177
  -o-transform: rotate(90deg) translateY(-100%);
1178
  -webkit-transform: rotate(90deg) translateY(-100%);
1179
}
1180
 
1181
.b-from-right.b-rotate-left180 {
1182
  transform: rotate(180deg) translateX(-100%);
1183
  -moz-transform: rotate(180deg) translateX(-100%);
1184
  -ms-transform: rotate(180deg) translateX(-100%);
1185
  -o-transform: rotate(180deg) translateX(-100%);
1186
  -webkit-transform: rotate(180deg) translateX(-100%);
1187
}
1188
 
1189
.b-from-right.b-rotate-right90 {
1190
  transform: rotate(-90deg) translateY(100%);
1191
  -moz-transform: rotate(-90deg) translateY(100%);
1192
  -ms-transform: rotate(-90deg) translateY(100%);
1193
  -o-transform: rotate(-90deg) translateY(100%);
1194
  -webkit-transform: rotate(-90deg) translateY(100%);
1195
}
1196
 
1197
.b-from-right.b-rotate-right180 {
1198
  transform: rotate(-180deg) translateX(-100%);
1199
  -moz-transform: rotate(-180deg) translateX(-100%);
1200
  -ms-transform: rotate(-180deg) translateX(-100%);
1201
  -o-transform: rotate(-180deg) translateX(-100%);
1202
  -webkit-transform: rotate(-180deg) translateX(-100%);
1203
}
1204
 
1205
.b-from-top.b-rotate-left90 {
1206
  transform: rotate(90deg) translateX(-100%);
1207
  -moz-transform: rotate(90deg) translateX(-100%);
1208
  -ms-transform: rotate(90deg) translateX(-100%);
1209
  -o-transform: rotate(90deg) translateX(-100%);
1210
  -webkit-transform: rotate(90deg) translateX(-100%);
1211
}
1212
 
1213
.b-from-top.b-rotate-left180 {
1214
  transform: rotate(180deg) translateY(100%);
1215
  -moz-transform: rotate(180deg) translateY(100%);
1216
  -ms-transform: rotate(180deg) translateY(100%);
1217
  -o-transform: rotate(180deg) translateY(100%);
1218
  -webkit-transform: rotate(180deg) translateY(100%);
1219
}
1220
 
1221
.b-from-top.b-rotate-right90 {
1222
  transform: rotate(-90deg) translateX(100%);
1223
  -moz-transform: rotate(-90deg) translateX(100%);
1224
  -ms-transform: rotate(-90deg) translateX(100%);
1225
  -o-transform: rotate(-90deg) translateX(100%);
1226
  -webkit-transform: rotate(-90deg) translateX(100%);
1227
}
1228
 
1229
.b-from-top.b-rotate-right180 {
1230
  transform: rotate(-180deg) translateY(100%);
1231
  -moz-transform: rotate(-180deg) translateY(100%);
1232
  -ms-transform: rotate(-180deg) translateY(100%);
1233
  -o-transform: rotate(-180deg) translateY(100%);
1234
  -webkit-transform: rotate(-180deg) translateY(100%);
1235
}
1236
 
1237
.b-from-bottom.b-rotate-left90 {
1238
  transform: rotate(90deg) translateX(100%);
1239
  -moz-transform: rotate(90deg) translateX(100%);
1240
  -ms-transform: rotate(90deg) translateX(100%);
1241
  -o-transform: rotate(90deg) translateX(100%);
1242
  -webkit-transform: rotate(90deg) translateX(100%);
1243
}
1244
 
1245
.b-from-bottom.b-rotate-left180 {
1246
  transform: rotate(180deg) translateY(-100%);
1247
  -moz-transform: rotate(180deg) translateY(-100%);
1248
  -ms-transform: rotate(180deg) translateY(-100%);
1249
  -o-transform: rotate(180deg) translateY(-100%);
1250
  -webkit-transform: rotate(180deg) translateY(-100%);
1251
}
1252
 
1253
.b-from-bottom.b-rotate-right90 {
1254
  transform: rotate(-90deg) translateX(-100%);
1255
  -moz-transform: rotate(-90deg) translateX(-100%);
1256
  -ms-transform: rotate(-90deg) translateX(-100%);
1257
  -o-transform: rotate(-90deg) translateX(-100%);
1258
  -webkit-transform: rotate(-90deg) translateX(-100%);
1259
}
1260
 
1261
.b-from-bottom.b-rotate-right180 {
1262
  transform: rotate(-180deg) translateY(-100%);
1263
  -moz-transform: rotate(-180deg) translateY(-100%);
1264
  -ms-transform: rotate(-180deg) translateY(-100%);
1265
  -o-transform: rotate(-180deg) translateY(-100%);
1266
  -webkit-transform: rotate(-180deg) translateY(-100%);
1267
}
1268
 
1269
/*
1270
** ZOOM
1271
*/
1272
 
1273
.b-zoom-in, .b-zoom-out {
1274
  transition-duration: 0.25s;
1275
  -moz-transition-duration: 0.25s;
1276
  -transition-duration: 0.25s;
1277
  -o-transition-duration: 0.25s;
1278
  -webkit-transition-duration: 0.25s;
1279
  transition-property: all;
1280
  -moz-transition-property: all;
1281
  -ms-transition-property: all;
1282
  -o-transition-property: all;
1283
  -webkit-transition-property: all;
1284
}
1285
 
1286
.b-zoom-in {
1287
  transform: scale(0, 0);
1288
  -moz-transform: scale(0, 0);
1289
  -ms-transform: scale(0, 0);
1290
  -o-transform: scale(0, 0);
1291
  -webkit-transform: scale(0, 0);
1292
}
1293
 
1294
.b-zoom-out {
1295
  transform: scale(2, 2);
1296
  -moz-transform: scale(2, 2);
1297
  -ms-transform: scale(2, 2);
1298
  -o-transform: scale(2, 2);
1299
  -webkit-transform: scale(2, 2);
1300
  opacity: 0;
1301
}
1302
 
1303
.b-hover .b-zoom-in,
1304
.b-effect:hover .b-zoom-in {
1305
  transform: scale(1, 1);
1306
}
1307
 
1308
.b-hover .b-zoom-out,
1309
.b-effect:hover .b-zoom-out {
1310
  transform: scale(1, 1);
1311
  opacity: 1;
1312
}
1313
 
1314
/*
1315
** SLIDE + ZOOM
1316
*/
1317
 
1318
.b-from-left.b-zoom-in {
1319
  transform: translateX(-100%) scale(0.01, 0.01);
1320
  -moz-transform: translateX(-100%) scale(0.01, 0.01);
1321
  -ms-transform: translateX(-100%) scale(0.01, 0.01);
1322
  -o-transform: translateX(-100%) scale(0.01, 0.01);
1323
  -webkit-transform: translateX(-100%) scale(0.01, 0.01);
1324
}
1325
 
1326
.b-from-right.b-zoom-in {
1327
  transform: translateX(100%) scale(0.01, 0.01);
1328
  -moz-transform: translateX(100%) scale(0.01, 0.01);
1329
  -ms-transform: translateX(100%) scale(0.01, 0.01);
1330
  -o-transform: translateX(100%) scale(0.01, 0.01);
1331
  -webkit-transform: translateX(100%) scale(0.01, 0.01);
1332
}
1333
 
1334
.b-from-top.b-zoom-in {
1335
  transform: translateY(-100%) scale(0.01, 0.01);
1336
  -moz-transform: translateY(-100%) scale(0.01, 0.01);
1337
  -ms-transform: translateY(-100%) scale(0.01, 0.01);
1338
  -o-transform: translateY(-100%) scale(0.01, 0.01);
1339
  -webkit-transform: translateY(-100%) scale(0.01, 0.01);
1340
}
1341
 
1342
.b-from-bottom.b-zoom-in {
1343
  transform: translateY(100%) scale(0.01, 0.01);
1344
  -moz-transform: translateY(100%) scale(0.01, 0.01);
1345
  -ms-transform: translateY(100%) scale(0.01, 0.01);
1346
  -o-transform: translateY(100%) scale(0.01, 0.01);
1347
  -webkit-transform: translateY(100%) scale(0.01, 0.01);
1348
}
1349
 
1350
.b-from-left.b-zoom-out {
1351
  transform: translateX(-100%) scale(2, 2);
1352
  -moz-transform: translateX(-100%) scale(2, 2);
1353
  -ms-transform: translateX(-100%) scale(2, 2);
1354
  -o-transform: translateX(-100%) scale(2, 2);
1355
  -webkit-transform: translateX(-100%) scale(2, 2);
1356
}
1357
 
1358
.b-from-right.b-zoom-out {
1359
  transform: translateX(100%) scale(2, 2);
1360
  -moz-transform: translateX(100%) scale(2, 2);
1361
  -ms-transform: translateX(100%) scale(2, 2);
1362
  -o-transform: translateX(100%) scale(2, 2);
1363
  -webkit-transform: translateX(100%) scale(2, 2);
1364
}
1365
 
1366
.b-from-top.b-zoom-out {
1367
  transform: translateY(-100%) scale(2, 2);
1368
  -moz-transform: translateY(-100%) scale(2, 2);
1369
  -ms-transform: translateY(-100%) scale(2, 2);
1370
  -o-transform: translateY(-100%) scale(2, 2);
1371
  -webkit-transform: translateY(-100%) scale(2, 2);
1372
}
1373
 
1374
.b-from-bottom.b-zoom-out {
1375
  transform: translateY(100%) scale(2, 2);
1376
  -moz-transform: translateY(100%) scale(2, 2);
1377
  -ms-transform: translateY(100%) scale(2, 2);
1378
  -o-transform: translateY(100%) scale(2, 2);
1379
  -webkit-transform: translateY(100%) scale(2, 2);
1380
}
1381
 
1382
.b-hover .b-zoom-in.b-from-left,
1383
.b-hover .b-zoom-in.b-from-right,
1384
.b-hover .b-zoom-in.b-from-top,
1385
.b-hover .b-zoom-in.b-from-bottom,
1386
.b-effect:hover .b-zoom-in.b-from-left,
1387
.b-effect:hover .b-zoom-in.b-from-right,
1388
.b-effect:hover .b-zoom-in.b-from-top,
1389
.b-effect:hover .b-zoom-in.b-from-bottom
1390
{
1391
  transform: scale(1, 1) translateY(0) translateX(0);
1392
}
1393
 
1394
.b-hover .b-zoom-out.b-from-left,
1395
.b-hover .b-zoom-out.b-from-right,
1396
.b-hover .b-zoom-out.b-from-top,
1397
.b-hover .b-zoom-out.b-from-bottom,
1398
.b-effect:hover .b-zoom-out.b-from-left,
1399
.b-effect:hover .b-zoom-out.b-from-right,
1400
.b-effect:hover .b-zoom-out.b-from-top,
1401
.b-effect:hover .b-zoom-out.b-from-bottom {
1402
  transform: scale(1, 1) translateY(0) translateX(0);
1403
  opacity: 1;
1404
}
1405
 
1406
/*
1407
** ROTATE + ZOOM
1408
*/
1409
 
1410
.b-rotate-left90.b-zoom-in {
1411
  transform: rotate(90deg) scale(0.01, 0.01);
1412
  -moz-transform: rotate(90deg) scale(0.01, 0.01);
1413
  -ms-transform: rotate(90deg) scale(0.01, 0.01);
1414
  -o-transform: rotate(90deg) scale(0.01, 0.01);
1415
  -webkit-transform: rotate(90deg) scale(0.01, 0.01);
1416
}
1417
 
1418
.b-rotate-left180.b-zoom-in {
1419
  transform: rotate(180deg) scale(0.01, 0.01);
1420
  -moz-transform: rotate(180deg) scale(0.01, 0.01);
1421
  -ms-transform: rotate(180deg) scale(0.01, 0.01);
1422
  -o-transform: rotate(180deg) scale(0.01, 0.01);
1423
  -webkit-transform: rotate(180deg) scale(0.01, 0.01);
1424
}
1425
 
1426
.b-rotate-right90.b-zoom-in {
1427
  transform: rotate(-90deg) scale(0.01, 0.01);
1428
  -moz-transform: rotate(-90deg) scale(0.01, 0.01);
1429
  -ms-transform: rotate(-90deg) scale(0.01, 0.01);
1430
  -o-transform: rotate(-90deg) scale(0.01, 0.01);
1431
  -webkit-transform: rotate(-90deg) scale(0.01, 0.01);
1432
}
1433
 
1434
.b-rotate-right180.b-zoom-in {
1435
  transform: rotate(-180deg) scale(0.01, 0.01);
1436
  -moz-transform: rotate(-180deg) scale(0.01, 0.01);
1437
  -ms-transform: rotate(-180deg) scale(0.01, 0.01);
1438
  -o-transform: rotate(-180deg) scale(0.01, 0.01);
1439
  -webkit-transform: rotate(-180deg) scale(0.01, 0.01);
1440
}
1441
 
1442
.b-rotate-left90.b-zoom-out {
1443
  transform: rotate(90deg) scale(2, 2);
1444
  -moz-transform: rotate(90deg) scale(2, 2);
1445
  -ms-transform: rotate(90deg) scale(2, 2);
1446
  -o-transform: rotate(90deg) scale(2, 2);
1447
  -webkit-transform: rotate(90deg) scale(2, 2);
1448
}
1449
 
1450
.b-rotate-left180.b-zoom-out {
1451
  transform: rotate(180deg) scale(2, 2);
1452
  -moz-transform: rotate(180deg) scale(2, 2);
1453
  -ms-transform: rotate(180deg) scale(2, 2);
1454
  -o-transform: rotate(180deg) scale(2, 2);
1455
  -webkit-transform: rotate(180deg) scale(2, 2);
1456
}
1457
 
1458
.b-rotate-right90.b-zoom-out {
1459
  transform: rotate(-90deg) scale(2, 2);
1460
  -moz-transform: rotate(-90deg) scale(2, 2);
1461
  -ms-transform: rotate(-90deg) scale(2, 2);
1462
  -o-transform: rotate(-90deg) scale(2, 2);
1463
  -webkit-transform: rotate(-90deg) scale(2, 2);
1464
}
1465
 
1466
.b-rotate-right180.b-zoom-out {
1467
  transform: rotate(-180deg) scale(2, 2);
1468
  -moz-transform: rotate(-180deg) scale(2, 2);
1469
  -ms-transform: rotate(-180deg) scale(2, 2);
1470
  -o-transform: rotate(-180deg) scale(2, 2);
1471
  -webkit-transform: rotate(-180deg) scale(2, 2);
1472
}
1473
 
1474
/*
1475
** SLIDE + ROTATE + ZOOM
1476
*/
1477
 
1478
.b-from-left.b-rotate-left90.b-zoom-in {
1479
  transform: rotate(90deg) translateY(100%) scale(0.01, 0.01);
1480
  -moz-transform: rotate(90deg) translateY(100%) scale(0.01, 0.01);
1481
  -ms-transform: rotate(90deg) translateY(100%) scale(0.01, 0.01);
1482
  -o-transform: rotate(90deg) translateY(100%) scale(0.01, 0.01);
1483
  -webkit-transform: rotate(90deg) translateY(100%) scale(0.01, 0.01);
1484
}
1485
 
1486
.b-from-left.b-rotate-left180.b-zoom-in {
1487
  transform: rotate(180deg) translateX(100%) scale(0.01, 0.01);
1488
  -moz-transform: rotate(180deg) translateX(100%) scale(0.01, 0.01);
1489
  -ms-transform: rotate(180deg) translateX(100%) scale(0.01, 0.01);
1490
  -o-transform: rotate(180deg) translateX(100%) scale(0.01, 0.01);
1491
  -webkit-transform: rotate(180deg) translateX(100%) scale(0.01, 0.01);
1492
}
1493
 
1494
.b-from-left.b-rotate-right90.b-zoom-in {
1495
  transform: rotate(-90deg) translateY(-100%) scale(0.01, 0.01);
1496
  -moz-transform: rotate(-90deg) translateY(-100%) scale(0.01, 0.01);
1497
  -ms-transform: rotate(-90deg) translateY(-100%) scale(0.01, 0.01);
1498
  -o-transform: rotate(-90deg) translateY(-100%) scale(0.01, 0.01);
1499
  -webkit-transform: rotate(-90deg) translateY(-100%) scale(0.01, 0.01);
1500
}
1501
 
1502
.b-from-left.b-rotate-right180.b-zoom-in {
1503
  transform: rotate(-180deg) translateX(100%) scale(0.01, 0.01);
1504
  -moz-transform: rotate(-180deg) translateX(100%) scale(0.01, 0.01);
1505
  -ms-transform: rotate(-180deg) translateX(100%) scale(0.01, 0.01);
1506
  -o-transform: rotate(-180deg) translateX(100%) scale(0.01, 0.01);
1507
  -webkit-transform: rotate(-180deg) translateX(100%) scale(0.01, 0.01);
1508
}
1509
 
1510
.b-from-right.b-rotate-left90.b-zoom-in {
1511
  transform: rotate(90deg) translateY(-100%) scale(0.01, 0.01);
1512
  -moz-transform: rotate(90deg) translateY(-100%) scale(0.01, 0.01);
1513
  -ms-transform: rotate(90deg) translateY(-100%) scale(0.01, 0.01);
1514
  -o-transform: rotate(90deg) translateY(-100%) scale(0.01, 0.01);
1515
  -webkit-transform: rotate(90deg) translateY(-100%) scale(0.01, 0.01);
1516
}
1517
 
1518
.b-from-right.b-rotate-left180.b-zoom-in {
1519
  transform: rotate(180deg) translateX(-100%) scale(0.01, 0.01);
1520
  -moz-transform: rotate(180deg) translateX(-100%) scale(0.01, 0.01);
1521
  -ms-transform: rotate(180deg) translateX(-100%) scale(0.01, 0.01);
1522
  -o-transform: rotate(180deg) translateX(-100%) scale(0.01, 0.01);
1523
  -webkit-transform: rotate(180deg) translateX(-100%) scale(0.01, 0.01);
1524
}
1525
 
1526
.b-from-right.b-rotate-right90.b-zoom-in {
1527
  transform: rotate(-90deg) translateY(100%) scale(0.01, 0.01);
1528
  -moz-transform: rotate(-90deg) translateY(100%) scale(0.01, 0.01);
1529
  -ms-transform: rotate(-90deg) translateY(100%) scale(0.01, 0.01);
1530
  -o-transform: rotate(-90deg) translateY(100%) scale(0.01, 0.01);
1531
  -webkit-transform: rotate(-90deg) translateY(100%) scale(0.01, 0.01);
1532
}
1533
 
1534
.b-from-right.b-rotate-right180.b-zoom-in {
1535
  transform: rotate(-180deg) translateX(-100%) scale(0.01, 0.01);
1536
  -moz-transform: rotate(-180deg) translateX(-100%) scale(0.01, 0.01);
1537
  -ms-transform: rotate(-180deg) translateX(-100%) scale(0.01, 0.01);
1538
  -o-transform: rotate(-180deg) translateX(-100%) scale(0.01, 0.01);
1539
  -webkit-transform: rotate(-180deg) translateX(-100%) scale(0.01, 0.01);
1540
}
1541
 
1542
.b-from-top.b-rotate-left90.b-zoom-in {
1543
  transform: rotate(90deg) translateX(-100%) scale(0.01, 0.01);
1544
  -moz-transform: rotate(90deg) translateX(-100%) scale(0.01, 0.01);
1545
  -ms-transform: rotate(90deg) translateX(-100%) scale(0.01, 0.01);
1546
  -o-transform: rotate(90deg) translateX(-100%) scale(0.01, 0.01);
1547
  -webkit-transform: rotate(90deg) translateX(-100%) scale(0.01, 0.01);
1548
}
1549
 
1550
.b-from-top.b-rotate-left180.b-zoom-in {
1551
  transform: rotate(180deg) translateY(100%) scale(0.01, 0.01);
1552
  -moz-transform: rotate(180deg) translateY(100%) scale(0.01, 0.01);
1553
  -ms-transform: rotate(180deg) translateY(100%) scale(0.01, 0.01);
1554
  -o-transform: rotate(180deg) translateY(100%) scale(0.01, 0.01);
1555
  -webkit-transform: rotate(180deg) translateY(100%) scale(0.01, 0.01);
1556
}
1557
 
1558
.b-from-top.b-rotate-right90.b-zoom-in {
1559
  transform: rotate(-90deg) translateX(100%) scale(0.01, 0.01);
1560
  -moz-transform: rotate(-90deg) translateX(100%) scale(0.01, 0.01);
1561
  -ms-transform: rotate(-90deg) translateX(100%) scale(0.01, 0.01);
1562
  -o-transform: rotate(-90deg) translateX(100%) scale(0.01, 0.01);
1563
  -webkit-transform: rotate(-90deg) translateX(100%) scale(0.01, 0.01);
1564
}
1565
 
1566
.b-from-top.b-rotate-right180.b-zoom-in {
1567
  transform: rotate(-180deg) translateY(100%) scale(0.01, 0.01);
1568
  -moz-transform: rotate(-180deg) translateY(100%) scale(0.01, 0.01);
1569
  -ms-transform: rotate(-180deg) translateY(100%) scale(0.01, 0.01);
1570
  -o-transform: rotate(-180deg) translateY(100%) scale(0.01, 0.01);
1571
  -webkit-transform: rotate(-180deg) translateY(100%) scale(0.01, 0.01);
1572
}
1573
 
1574
.b-from-bottom.b-rotate-left90.b-zoom-in {
1575
  transform: rotate(90deg) translateX(100%) scale(0.01, 0.01);
1576
  -moz-transform: rotate(90deg) translateX(100%) scale(0.01, 0.01);
1577
  -ms-transform: rotate(90deg) translateX(100%) scale(0.01, 0.01);
1578
  -o-transform: rotate(90deg) translateX(100%) scale(0.01, 0.01);
1579
  -webkit-transform: rotate(90deg) translateX(100%) scale(0.01, 0.01);
1580
}
1581
 
1582
.b-from-bottom.b-rotate-left180.b-zoom-in {
1583
  transform: rotate(180deg) translateY(-100%) scale(0.01, 0.01);
1584
  -moz-transform: rotate(180deg) translateY(-100%) scale(0.01, 0.01);
1585
  -ms-transform: rotate(180deg) translateY(-100%) scale(0.01, 0.01);
1586
  -o-transform: rotate(180deg) translateY(-100%) scale(0.01, 0.01);
1587
  -webkit-transform: rotate(180deg) translateY(-100%) scale(0.01, 0.01);
1588
}
1589
 
1590
.b-from-bottom.b-rotate-right90.b-zoom-in {
1591
  transform: rotate(-90deg) translateX(-100%) scale(0.01, 0.01);
1592
  -moz-transform: rotate(-90deg) translateX(-100%) scale(0.01, 0.01);
1593
  -ms-transform: rotate(-90deg) translateX(-100%) scale(0.01, 0.01);
1594
  -o-transform: rotate(-90deg) translateX(-100%) scale(0.01, 0.01);
1595
  -webkit-transform: rotate(-90deg) translateX(-100%) scale(0.01, 0.01);
1596
}
1597
 
1598
.b-from-bottom.b-rotate-right180.b-zoom-in {
1599
  transform: rotate(-180deg) translateY(-100%) scale(0.01, 0.01);
1600
  -moz-transform: rotate(-180deg) translateY(-100%) scale(0.01, 0.01);
1601
  -ms-transform: rotate(-180deg) translateY(-100%) scale(0.01, 0.01);
1602
  -o-transform: rotate(-180deg) translateY(-100%) scale(0.01, 0.01);
1603
  -webkit-transform: rotate(-180deg) translateY(-100%) scale(0.01, 0.01);
1604
}
1605
 
1606
.b-from-left.b-rotate-left90.b-zoom-out {
1607
  transform: rotate(90deg) translateY(100%) scale(2, 2);
1608
  -moz-transform: rotate(90deg) translateY(100%) scale(2, 2);
1609
  -ms-transform: rotate(90deg) translateY(100%) scale(2, 2);
1610
  -o-transform: rotate(90deg) translateY(100%) scale(2, 2);
1611
  -webkit-transform: rotate(90deg) translateY(100%) scale(2, 2);
1612
}
1613
 
1614
.b-from-left.b-rotate-left180.b-zoom-out {
1615
  transform: rotate(180deg) translateX(100%) scale(2, 2);
1616
  -moz-transform: rotate(180deg) translateX(100%) scale(2, 2);
1617
  -ms-transform: rotate(180deg) translateX(100%) scale(2, 2);
1618
  -o-transform: rotate(180deg) translateX(100%) scale(2, 2);
1619
  -webkit-transform: rotate(180deg) translateX(100%) scale(2, 2);
1620
}
1621
 
1622
.b-from-left.b-rotate-right90.b-zoom-out {
1623
  transform: rotate(-90deg) translateY(-100%) scale(2, 2);
1624
  -moz-transform: rotate(-90deg) translateY(-100%) scale(2, 2);
1625
  -ms-transform: rotate(-90deg) translateY(-100%) scale(2, 2);
1626
  -o-transform: rotate(-90deg) translateY(-100%) scale(2, 2);
1627
  -webkit-transform: rotate(-90deg) translateY(-100%) scale(2, 2);
1628
}
1629
 
1630
.b-from-left.b-rotate-right180.b-zoom-out {
1631
  transform: rotate(-180deg) translateX(100%) scale(2, 2);
1632
  -moz-transform: rotate(-180deg) translateX(100%) scale(2, 2);
1633
  -ms-transform: rotate(-180deg) translateX(100%) scale(2, 2);
1634
  -o-transform: rotate(-180deg) translateX(100%) scale(2, 2);
1635
  -webkit-transform: rotate(-180deg) translateX(100%) scale(2, 2);
1636
}
1637
 
1638
.b-from-right.b-rotate-left90.b-zoom-out {
1639
  transform: rotate(90deg) translateY(-100%) scale(2, 2);
1640
  -moz-transform: rotate(90deg) translateY(-100%) scale(2, 2);
1641
  -ms-transform: rotate(90deg) translateY(-100%) scale(2, 2);
1642
  -o-transform: rotate(90deg) translateY(-100%) scale(2, 2);
1643
  -webkit-transform: rotate(90deg) translateY(-100%) scale(2, 2);
1644
}
1645
 
1646
.b-from-right.b-rotate-left180.b-zoom-out {
1647
  transform: rotate(180deg) translateX(-100%) scale(2, 2);
1648
  -moz-transform: rotate(180deg) translateX(-100%) scale(2, 2);
1649
  -ms-transform: rotate(180deg) translateX(-100%) scale(2, 2);
1650
  -o-transform: rotate(180deg) translateX(-100%) scale(2, 2);
1651
  -webkit-transform: rotate(180deg) translateX(-100%) scale(2, 2);
1652
}
1653
 
1654
.b-from-right.b-rotate-right90.b-zoom-out {
1655
  transform: rotate(-90deg) translateY(100%) scale(2, 2);
1656
  -moz-transform: rotate(-90deg) translateY(100%) scale(2, 2);
1657
  -ms-transform: rotate(-90deg) translateY(100%) scale(2, 2);
1658
  -o-transform: rotate(-90deg) translateY(100%) scale(2, 2);
1659
  -webkit-transform: rotate(-90deg) translateY(100%) scale(2, 2);
1660
}
1661
 
1662
.b-from-right.b-rotate-right180.b-zoom-out {
1663
  transform: rotate(-180deg) translateX(-100%) scale(2, 2);
1664
  -moz-transform: rotate(-180deg) translateX(-100%) scale(2, 2);
1665
  -ms-transform: rotate(-180deg) translateX(-100%) scale(2, 2);
1666
  -o-transform: rotate(-180deg) translateX(-100%) scale(2, 2);
1667
  -webkit-transform: rotate(-180deg) translateX(-100%) scale(2, 2);
1668
}
1669
 
1670
.b-from-top.b-rotate-left90.b-zoom-out {
1671
  transform: rotate(90deg) translateX(-100%) scale(2, 2);
1672
  -moz-transform: rotate(90deg) translateX(-100%) scale(2, 2);
1673
  -ms-transform: rotate(90deg) translateX(-100%) scale(2, 2);
1674
  -o-transform: rotate(90deg) translateX(-100%) scale(2, 2);
1675
  -webkit-transform: rotate(90deg) translateX(-100%) scale(2, 2);
1676
}
1677
 
1678
.b-from-top.b-rotate-left180.b-zoom-out {
1679
  transform: rotate(180deg) translateY(100%) scale(2, 2);
1680
  -moz-transform: rotate(180deg) translateY(100%) scale(2, 2);
1681
  -ms-transform: rotate(180deg) translateY(100%) scale(2, 2);
1682
  -o-transform: rotate(180deg) translateY(100%) scale(2, 2);
1683
  -webkit-transform: rotate(180deg) translateY(100%) scale(2, 2);
1684
}
1685
 
1686
.b-from-top.b-rotate-right90.b-zoom-out {
1687
  transform: rotate(-90deg) translateX(100%) scale(2, 2);
1688
  -moz-transform: rotate(-90deg) translateX(100%) scale(2, 2);
1689
  -ms-transform: rotate(-90deg) translateX(100%) scale(2, 2);
1690
  -o-transform: rotate(-90deg) translateX(100%) scale(2, 2);
1691
  -webkit-transform: rotate(-90deg) translateX(100%) scale(2, 2);
1692
}
1693
 
1694
.b-from-top.b-rotate-right180.b-zoom-out {
1695
  transform: rotate(-180deg) translateY(100%) scale(2, 2);
1696
  -moz-transform: rotate(-180deg) translateY(100%) scale(2, 2);
1697
  -ms-transform: rotate(-180deg) translateY(100%) scale(2, 2);
1698
  -o-transform: rotate(-180deg) translateY(100%) scale(2, 2);
1699
  -webkit-transform: rotate(-180deg) translateY(100%) scale(2, 2);
1700
}
1701
 
1702
.b-from-bottom.b-rotate-left90.b-zoom-out {
1703
  transform: rotate(90deg) translateX(100%) scale(2, 2);
1704
  -moz-transform: rotate(90deg) translateX(100%) scale(2, 2);
1705
  -ms-transform: rotate(90deg) translateX(100%) scale(2, 2);
1706
  -o-transform: rotate(90deg) translateX(100%) scale(2, 2);
1707
  -webkit-transform: rotate(90deg) translateX(100%) scale(2, 2);
1708
}
1709
 
1710
.b-from-bottom.b-rotate-left180.b-zoom-out {
1711
  transform: rotate(180deg) translateY(-100%) scale(2, 2);
1712
  -moz-transform: rotate(180deg) translateY(-100%) scale(2, 2);
1713
  -ms-transform: rotate(180deg) translateY(-100%) scale(2, 2);
1714
  -o-transform: rotate(180deg) translateY(-100%) scale(2, 2);
1715
  -webkit-transform: rotate(180deg) translateY(-100%) scale(2, 2);
1716
}
1717
 
1718
.b-from-bottom.b-rotate-right90.b-zoom-out {
1719
  transform: rotate(-90deg) translateX(-100%) scale(2, 2);
1720
  -moz-transform: rotate(-90deg) translateX(-100%) scale(2, 2);
1721
  -ms-transform: rotate(-90deg) translateX(-100%) scale(2, 2);
1722
  -o-transform: rotate(-90deg) translateX(-100%) scale(2, 2);
1723
  -webkit-transform: rotate(-90deg) translateX(-100%) scale(2, 2);
1724
}
1725
 
1726
.b-from-bottom.b-rotate-right180.b-zoom-out {
1727
  transform: rotate(-180deg) translateY(-100%) scale(2, 2);
1728
  -moz-transform: rotate(-180deg) translateY(-100%) scale(2, 2);
1729
  -ms-transform: rotate(-180deg) translateY(-100%) scale(2, 2);
1730
  -o-transform: rotate(-180deg) translateY(-100%) scale(2, 2);
1731
  -webkit-transform: rotate(-180deg) translateY(-100%) scale(2, 2);
1732
}
1733
 
1734
/*
1735
** ZOOM + SIZE
1736
*/
1737
 
1738
.b-effect:hover .b-size-90 {
1739
  transform: scale(0.9, 0.9);
1740
  -moz-transform: scale(0.9, 0.9);
1741
  -ms-transform: scale(0.9, 0.9);
1742
  -o-transform: scale(0.9, 0.9);
1743
  -webkit-transform: scale(0.9, 0.9);
1744
}
1745
 
1746
.b-effect:hover .b-size-80.b-zoom-in,
1747
.b-effect:hover .b-size-80.b-zoom-out {
1748
  transform: scale(0.8, 0.8);
1749
  -moz-transform: scale(0.8, 0.8);
1750
  -ms-transform: scale(0.8, 0.8);
1751
  -o-transform: scale(0.8, 0.8);
1752
  -webkit-transform: scale(0.8, 0.8);
1753
}
1754
 
1755
.b-effect:hover .b-size-70.b-zoom-in,
1756
.b-effect:hover .b-size-70.b-zoom-out {
1757
  transform: scale(0.7, 0.7);
1758
  -moz-transform: scale(0.7, 0.7);
1759
  -ms-transform: scale(0.7, 0.7);
1760
  -o-transform: scale(0.7, 0.7);
1761
  -webkit-transform: scale(0.7, 0.7);
1762
}
1763
 
1764
.b-effect:hover .b-size-60.b-zoom-in,
1765
.b-effect:hover .b-size-60.b-zoom-out {
1766
  transform: scale(0.6, 0.6);
1767
  -moz-transform: scale(0.6, 0.6);
1768
  -ms-transform: scale(0.6, 0.6);
1769
  -o-transform: scale(0.6, 0.6);
1770
  -webkit-transform: scale(0.6, 0.6);
1771
}
1772
 
1773
.b-effect:hover .b-size-50.b-zoom-in,
1774
.b-effect:hover .b-size-50.b-zoom-out {
1775
  transform: scale(0.5, 0.5);
1776
  -moz-transform: scale(0.5, 0.5);
1777
  -ms-transform: scale(0.5, 0.5);
1778
  -o-transform: scale(0.5, 0.5);
1779
  -webkit-transform: scale(0.5, 0.5);
1780
}
1781
 
1782
/*
1783
** FADE
1784
*/
1785
 
1786
.b-fade {
1787
  transition-duration: 0.25s;
1788
  -moz-transition-duration: 0.25s;
1789
  -transition-duration: 0.25s;
1790
  -o-transition-duration: 0.25s;
1791
  -webkit-transition-duration: 0.25s;
1792
  transition-property: all;
1793
  -moz-transition-property: all;
1794
  -ms-transition-property: all;
1795
  -o-transition-property: all;
1796
  -webkit-transition-property: all;
1797
  opacity: 0;
1798
}
1799
 
1800
.b-hover .b-fade,
1801
.b-effect:hover .b-fade {
1802
  opacity: 1;
1803
}
1804
 
1805
/*
1806
** OPACITY
1807
*/
1808
 
1809
.b-effect:hover .b-opacity-100,
1810
.b-hover .b-opacity-100 {
1811
  opacity: 1 !important;
1812
}
1813
 
1814
.b-effect:hover .b-opacity-95,
1815
.b-hover .b-opacity-95 {
1816
  opacity: 0.95 !important;
1817
}
1818
 
1819
.b-effect:hover .b-opacity-90,
1820
.b-hover .b-opacity-90 {
1821
  opacity: 0.9 !important;
1822
}
1823
 
1824
.b-effect:hover .b-opacity-85,
1825
.b-hover .b-opacity-85 {
1826
  opacity: 0.85 !important;
1827
}
1828
 
1829
.b-effect:hover .b-opacity-80,
1830
.b-hover .b-opacity-80 {
1831
  opacity: 0.8 !important;
1832
}
1833
 
1834
.b-effect:hover .b-opacity-75,
1835
.b-hover .b-opacity-75 {
1836
  opacity: 0.75 !important;
1837
}
1838
 
1839
.b-effect:hover .b-opacity-70,
1840
.b-hover .b-opacity-70 {
1841
  opacity: 0.7 !important;
1842
}
1843
 
1844
.b-effect:hover .b-opacity-65,
1845
.b-hover .b-opacity-65 {
1846
  opacity: 0.65 !important;
1847
}
1848
 
1849
.b-effect:hover .b-opacity-60,
1850
.b-hover .b-opacity-60 {
1851
  opacity: 0.6 !important;
1852
}
1853
 
1854
.b-effect:hover .b-opacity-55,
1855
.b-hover .b-opacity-55 {
1856
  opacity: 0.55 !important;
1857
}
1858
 
1859
.b-effect:hover .b-opacity-50,
1860
.b-hover .b-opacity-50 {
1861
  opacity: 0.50 !important;
1862
}
1863
 
1864
.b-effect:hover .b-opacity-45,
1865
.b-hover .b-opacity-45 {
1866
  opacity: 0.45 !important;
1867
}
1868
 
1869
.b-effect:hover .b-opacity-40,
1870
.b-hover .b-opacity-40 {
1871
  opacity: 0.4 !important;
1872
}
1873
 
1874
.b-effect:hover .b-opacity-35,
1875
.b-hover .b-opacity-35 {
1876
  opacity: 0.35 !important;
1877
}
1878
 
1879
.b-effect:hover .b-opacity-30,
1880
.b-hover .b-opacity-30 {
1881
  opacity: 0.3 !important;
1882
}
1883
 
1884
.b-effect:hover .b-opacity-25,
1885
.b-hover .b-opacity-25 {
1886
  opacity: 0.25 !important;
1887
}
1888
 
1889
.b-effect:hover .b-opacity-20,
1890
.b-hover .b-opacity-20 {
1891
  opacity: 0.2 !important;
1892
}
1893
 
1894
.b-effect:hover .b-opacity-15,
1895
.b-hover .b-opacity-15 {
1896
  opacity: 0.15 !important;
1897
}
1898
 
1899
.b-effect:hover .b-opacity-10,
1900
.b-hover .b-opacity-10 {
1901
  opacity: 0.1 !important;
1902
}
1903
 
1904
.b-effect:hover .b-opacity-05,
1905
.b-hover .b-opacity-05 {
1906
  opacity: 0.05 !important;
1907
}
1908
 
1909
.b-effect:hover .b-opacity-0,
1910
.b-hover .b-opacity-0 {
1911
  opacity: 0 !important;
1912
}
1913
 
1914
/*
1915
** DELAY
1916
*/
1917
 
1918
.b-effect:hover .b-delay01, .b-hover .b-delay01 {
1919
  transition-delay: 0.1s;
1920
  -moz-transition-delay: 0.1s;
1921
  -ms-transition-delay: 0.1s;
1922
  -o-transition-delay: 0.1s;
1923
  -webkit-transition-delay: 0.1s;
1924
}
1925
 
1926
.b-effect:hover .b-delay02, .b-hover .b-delay02 {
1927
  transition-delay: 0.2s;
1928
  -moz-transition-delay: 0.2s;
1929
  -ms-transition-delay: 0.2s;
1930
  -o-transition-delay: 0.2s;
1931
  -webkit-transition-delay: 0.2s;
1932
}
1933
 
1934
.b-effect:hover .b-delay03, .b-hover .b-delay03 {
1935
  transition-delay: 0.3s;
1936
  -moz-transition-delay: 0.3s;
1937
  -ms-transition-delay: 0.3s;
1938
  -o-transition-delay: 0.3s;
1939
  -webkit-transition-delay: 0.3s;
1940
}
1941
 
1942
.b-effect:hover .b-delay04, .b-hover .b-delay04 {
1943
  transition-delay: 0.4s;
1944
  -moz-transition-delay: 0.4s;
1945
  -ms-transition-delay: 0.4s;
1946
  -o-transition-delay: 0.4s;
1947
  -webkit-transition-delay: 0.4s;
1948
}
1949
 
1950
.b-effect:hover .b-delay05, .b-hover .b-delay05 {
1951
  transition-delay: 0.5s;
1952
  -moz-transition-delay: 0.5s;
1953
  -ms-transition-delay: 0.5s;
1954
  -o-transition-delay: 0.5s;
1955
  -webkit-transition-delay: 0.5s;
1956
}
1957
 
1958
.b-effect:hover .b-delay06, .b-hover .b-delay06 {
1959
  transition-delay: 0.6s;
1960
  -moz-transition-delay: 0.6s;
1961
  -ms-transition-delay: 0.6s;
1962
  -o-transition-delay: 0.6s;
1963
  -webkit-transition-delay: 0.6s;
1964
}
1965
 
1966
.b-effect:hover .b-delay07, .b-hover .b-delay07 {
1967
  transition-delay: 0.7s;
1968
  -moz-transition-delay: 0.7s;
1969
  -ms-transition-delay: 0.7s;
1970
  -o-transition-delay: 0.7s;
1971
  -webkit-transition-delay: 0.7s;
1972
}
1973
 
1974
.b-effect:hover .b-delay08, .b-hover .b-delay08 {
1975
  transition-delay: 0.8s;
1976
  -moz-transition-delay: 0.8s;
1977
  -ms-transition-delay: 0.8s;
1978
  -o-transition-delay: 0.8s;
1979
  -webkit-transition-delay: 0.8s;
1980
}
1981
 
1982
.b-effect:hover .b-delay09, .b-hover .b-delay09 {
1983
  transition-delay: 0.9s;
1984
  -moz-transition-delay: 0.9s;
1985
  -ms-transition-delay: 0.9s;
1986
  -o-transition-delay: 0.9s;
1987
  -webkit-transition-delay: 0.9s;
1988
}
1989
 
1990
.b-effect:hover .b-delay10, .b-hover .b-delay10 {
1991
  transition-delay: 1s;
1992
  -moz-transition-delay: 1s;
1993
  -ms-transition-delay: 1s;
1994
  -o-transition-delay: 1s;
1995
  -webkit-transition-delay: 1s;
1996
}
1997
 
1998
.b-effect:hover .b-delay11, .b-hover .b-delay11 {
1999
  transition-delay: 1.1s;
2000
  -moz-transition-delay: 1.1s;
2001
  -ms-transition-delay: 1.1s;
2002
  -o-transition-delay: 1.1s;
2003
  -webkit-transition-delay: 1.1s;
2004
}
2005
 
2006
.b-effect:hover .b-delay12, .b-hover .b-delay12 {
2007
  transition-delay: 1.2s;
2008
  -moz-transition-delay: 1.2s;
2009
  -ms-transition-delay: 1.2s;
2010
  -o-transition-delay: 1.2s;
2011
  -webkit-transition-delay: 1.2s;
2012
}
2013
 
2014
.b-effect:hover .b-delay13, .b-hover .b-delay13 {
2015
  transition-delay: 1.3s;
2016
  -moz-transition-delay: 1.3s;
2017
  -ms-transition-delay: 1.3s;
2018
  -o-transition-delay: 1.3s;
2019
  -webkit-transition-delay: 1.3s;
2020
}
2021
 
2022
.b-effect:hover .b-delay14, .b-hover .b-delay14 {
2023
  transition-delay: 1.4s;
2024
  -moz-transition-delay: 1.4s;
2025
  -ms-transition-delay: 1.4s;
2026
  -o-transition-delay: 1.4s;
2027
  -webkit-transition-delay: 1.4s;
2028
}
2029
 
2030
.b-effect:hover .b-delay15, .b-hover .b-delay15 {
2031
  transition-delay: 1.5s;
2032
  -moz-transition-delay: 1.5s;
2033
  -ms-transition-delay: 1.5s;
2034
  -o-transition-delay: 1.5s;
2035
  -webkit-transition-delay: 1.5s;
2036
}
2037
 
2038
.b-effect:hover .b-delay16, .b-hover .b-delay16 {
2039
  transition-delay: 1.6s;
2040
  -moz-transition-delay: 1.6s;
2041
  -ms-transition-delay: 1.6s;
2042
  -o-transition-delay: 1.6s;
2043
  -webkit-transition-delay: 1.6s;
2044
}
2045
 
2046
.b-effect:hover .b-delay17, .b-hover .b-delay17 {
2047
  transition-delay: 1.7s;
2048
  -moz-transition-delay: 1.7s;
2049
  -ms-transition-delay: 1.7s;
2050
  -o-transition-delay: 1.7s;
2051
  -webkit-transition-delay: 1.7s;
2052
}
2053
 
2054
.b-effect:hover .b-delay18, .b-hover .b-delay18 {
2055
  transition-delay: 1.8s;
2056
  -moz-transition-delay: 1.8s;
2057
  -ms-transition-delay: 1.8s;
2058
  -o-transition-delay: 1.8s;
2059
  -webkit-transition-delay: 1.8s;
2060
}
2061
 
2062
.b-effect:hover .b-delay19, .b-hover .b-delay19 {
2063
  transition-delay: 1.9s;
2064
  -moz-transition-delay: 1.9s;
2065
  -ms-transition-delay: 1.9s;
2066
  -o-transition-delay: 1.9s;
2067
  -webkit-transition-delay: 1.9s;
2068
}
2069
 
2070
.b-effect:hover .b-delay20, .b-hover .b-delay20 {
2071
  transition-delay: 2s;
2072
  -moz-transition-delay: 2s;
2073
  -ms-transition-delay: 2s;
2074
  -o-transition-delay: 2s;
2075
  -webkit-transition-delay: 2s;
2076
}
2077
 
2078
 
2079
/*
2080
** IMG ROTATE
2081
*/
2082
 
2083
.b-img-rotate-right10,
2084
.b-img-rotate-left10 {
2085
  transition-duration: 0.25s;
2086
  -moz-transition-duration: 0.25s;
2087
  -transition-duration: 0.25s;
2088
  -o-transition-duration: 0.25s;
2089
  -webkit-transition-duration: 0.25s;
2090
  transition-property: all;
2091
  -moz-transition-property: all;
2092
  -ms-transition-property: all;
2093
  -o-transition-property: all;
2094
  -webkit-transition-property: all;
2095
  transform: scale(1.17, 1.17);
2096
  -moz-transform: scale(1.17, 1.17);
2097
  -ms-transform: scale(1.17, 1.17);
2098
  -o-transform: scale(1.17, 1.17);
2099
  -webkit-transform: scale(1.17, 1.17);
2100
}
2101
 
2102
.b-hover .b-img-rotate-left10, .b-effect:hover .b-img-rotate-left10 {
2103
  transform: rotate(10deg) scale(1.17, 1.17);
2104
  -moz-transform: rotate(10deg) scale(1.17, 1.17);
2105
  -ms-transform: rotate(10deg) scale(1.17, 1.17);
2106
  -o-transform: rotate(10deg) scale(1.17, 1.17);
2107
  -webkit-transform: rotate(10deg) scale(1.17, 1.17);
2108
}
2109
 
2110
.b-hover .b-img-rotate-right10, .b-effect:hover .b-img-rotate-right10 {
2111
  transform: rotate(-10deg) scale(1.17, 1.17);
2112
  -moz-transform: rotate(-10deg) scale(1.17, 1.17);
2113
  -ms-transform: rotate(-10deg) scale(1.17, 1.17);
2114
  -o-transform: rotate(-10deg) scale(1.17, 1.17);
2115
  -webkit-transform: rotate(-10deg) scale(1.17, 1.17);
2116
}
2117
 
2118
/*
2119
** IMG ZOOM
2120
*/
2121
 
2122
.b-img-zoom-in5, .b-img-zoom-in10, .b-img-zoom-out5, .b-img-zoom-out10 {
2123
  transition-duration: 0.25s;
2124
  -moz-transition-duration: 0.25s;
2125
  -transition-duration: 0.25s;
2126
  -o-transition-duration: 0.25s;
2127
  -webkit-transition-duration: 0.25s;
2128
  transition-property: all;
2129
  -moz-transition-property: all;
2130
  -ms-transition-property: all;
2131
  -o-transition-property: all;
2132
  -webkit-transition-property: all;
2133
}
2134
 
2135
.b-hover .b-img-zoom-in5, .b-effect:hover .b-img-zoom-in5 {
2136
  transform: scale(1.05, 1.05);
2137
  -moz-transform: scale(1.05, 1.05);
2138
  -ms-transform: scale(1.05, 1.05);
2139
  -o-transform: scale(1.05, 1.05);
2140
  -webkit-transform: scale(1.05, 1.05);
2141
}
2142
 
2143
.b-hover .b-img-zoom-in10, .b-effect:hover .b-img-zoom-in10 {
2144
  transform: scale(1.1, 1.1);
2145
  -moz-transform: scale(1.1, 1.1);
2146
  -ms-transform: scale(1.1, 1.1);
2147
  -o-transform: scale(1.1, 1.1);
2148
  -webkit-transform: scale(1.1, 1.1);
2149
}
2150
 
2151
.b-hover .b-img-zoom-out5, .b-effect:hover .b-img-zoom-out5 {
2152
  transform: scale(1, 1);
2153
  -moz-transform: scale(1, 1);
2154
  -ms-transform: scale(1, 1);
2155
  -o-transform: scale(1, 1);
2156
  -webkit-transform: scale(1, 1);
2157
}
2158
 
2159
.b-img-zoom-out5, .b-effect .b-img-zoom-out5 {
2160
  transform: scale(1.05, 1.05);
2161
  -moz-transform: scale(1.05, 1.05);
2162
  -ms-transform: scale(1.05, 1.05);
2163
  -o-transform: scale(1.05, 1.05);
2164
  -webkit-transform: scale(1.05, 1.05);
2165
}
2166
 
2167
.b-hover .b-img-zoom-out10, .b-effect:hover .b-img-zoom-out10 {
2168
  transform: scale(1, 1);
2169
  -moz-transform: scale(1, 1);
2170
  -ms-transform: scale(1, 1);
2171
  -o-transform: scale(1, 1);
2172
  -webkit-transform: scale(1, 1);
2173
}
2174
 
2175
.b-img-zoom-out10, .b-effect .b-img-zoom-out10 {
2176
  transform: scale(1.1, 1.1);
2177
  -moz-transform: scale(1.1, 1.1);
2178
  -ms-transform: scale(1.1, 1.1);
2179
  -o-transform: scale(1.1, 1.1);
2180
  -webkit-transform: scale(1.1, 1.1);
2181
}
2182
 
2183
/*
2184
** IMG ROTATE + ZOOM
2185
*/
2186
 
2187
.b-img-rotate-right10.b-img-zoom-in5,
2188
.b-img-rotate-left10.b-img-zoom-in5 {
2189
  transform: scale(1.11, 1.11);
2190
  -moz-transform: scale(1.11, 1.11);
2191
  -ms-transform: scale(1.11, 1.11);
2192
  -o-transform: scale(1.11, 1.11);
2193
  -webkit-transform: scale(1.11, 1.11);
2194
}
2195
 
2196
.b-img-rotate-right10.b-img-zoom-in10,
2197
.b-img-rotate-left10.b-img-zoom-in10 {
2198
  transform: scale(1.05, 1.05);
2199
  -moz-transform: scale(1.05, 1.05);
2200
  -ms-transform: scale(1.05, 1.05);
2201
  -o-transform: scale(1.05, 1.05);
2202
  -webkit-transform: scale(1.05, 1.05);
2203
}
2204
 
2205
.b-hover .b-img-zoom-in5.b-img-rotate-left10, .b-effect:hover .b-img-zoom-in5.b-img-rotate-left10 {
2206
  transform: rotate(-10deg)  scale(1.17, 1.17);
2207
  -moz-transform: rotate(-10deg)  scale(1.17, 1.17);
2208
  -ms-transform: rotate(-10deg)  scale(1.17, 1.17);
2209
  -o-transform: rotate(-10deg)  scale(1.17, 1.17);
2210
  -webkit-transform: rotate(-10deg)  scale(1.17, 1.17);
2211
}
2212
 
2213
.b-hover .b-img-zoom-in10.b-img-rotate-left10, .b-effect:hover .b-img-zoom-in10.b-img-rotate-left10 {
2214
  transform: rotate(-10deg)  scale(1.17, 1.17);
2215
  -moz-transform: rotate(-10deg)  scale(1.17, 1.17);
2216
  -ms-transform: rotate(-10deg)  scale(1.17, 1.17);
2217
  -o-transform: rotate(-10deg)  scale(1.17, 1.17);
2218
  -webkit-transform: rotate(-10deg)  scale(1.17, 1.17);
2219
}
2220
 
2221
.b-hover .b-img-zoom-in5.b-img-rotate-right10, .b-effect:hover .b-img-zoom-in5.b-img-rotate-right10 {
2222
  transform: rotate(10deg)  scale(1.17, 1.17);
2223
  -moz-transform: rotate(10deg)  scale(1.17, 1.17);
2224
  -ms-transform: rotate(10deg)  scale(1.17, 1.17);
2225
  -o-transform: rotate(10deg)  scale(1.17, 1.17);
2226
  -webkit-transform: rotate(10deg)  scale(1.17, 1.17);
2227
}
2228
 
2229
.b-hover .b-img-zoom-in10.b-img-rotate-right10, .b-effect:hover .b-img-zoom-in10.b-img-rotate-right10 {
2230
  transform: rotate(10deg)  scale(1.17, 1.17);
2231
  -moz-transform: rotate(10deg)  scale(1.17, 1.17);
2232
  -ms-transform: rotate(10deg)  scale(1.17, 1.17);
2233
  -o-transform: rotate(10deg)  scale(1.17, 1.17);
2234
  -webkit-transform: rotate(10deg)  scale(1.17, 1.17);
2235
}
 
JavaScript 
$(document).ready(function() {
1
$(document).ready(function() {
2
    var circles = $(".b-hover-layer.b-circle");
3
    for (var i = circles.length - 1; i >= 0; i--) {
4
      width = $(circles[i]).width();
5
      height = $(circles[i]).height();
6
 
7
      square = 0;
8
 
9
      if(width > height) {
10
        square = height;
11
      } else {
12
        square = width;
13
      }
14
 
15
      $(circles[i]).width(square);
16
      $(circles[i]).height(square);
17
    };
18
 
19
    var items = $(".b-effect.b-animate2");
20
    for (var y = items.length - 1; y >= 0; y--) {
21
        var childrens = $(items[y]).children();
22
        zindex = 0;
23
        for (var z = childrens.length - 1; z >= 0; z--) {
24
            $(childrens[z]).css("z-index", zindex);
25
            zindex++;
26
        };
27
    };
28
});
 

Untitled

CSSDeck G+