Clippy/mains.css at gh-pages · The-Turing-Machine/Clippy · GitHub

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100


body{background-color:#34495e;}
li{background-color:white;}
ul{list-style:none}

.gridster
{
    margin-top: 100px;
    margin-bottom: 50px;
}
.box {
   position: absolute;
/*  margin: 0 auto;
    padding: 1em 0 4em;*/
    width: 100%;
    height: 100%;
    overflow: hidden;

}

img{
position: absolute;
   width:calc(100% + 40px) !important;
    height:100% !important;
    opacity: 0.8;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0, 0);
    transform: translate3d(-40px,0,0);
}

.box:hover img{
 opacity: 1;
     -webkit-transform: translate3d(0,0, 0);
    transform: translate3d(0,0,0);

}
.content{
        position: absolute;
    top: 0px;
    left: 0px;
/*    padding: 2em;*/
    width: 100%;
    height: 100%;
}
h2{
    color:white;
        -webkit-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
       clear:left;
    color:white;
    text-align: center;
    padding: 5px 0 5px 0;
     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    /*margin: 10px 0 0 10px;*/
    word-break: break-all ;
    margin-bottom:0px;

}
p{
     /*float:left;*/
     text-align: center;
     padding: 5px 8px 5px 8px;
    opacity: 0.7;
        -webkit-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.20s;
    bottom:0px;
    left:0px;


    position: absolute;
word-break: break-all ;


}
.box:hover h2{

     -webkit-transform: translate3d(0,0, 0);
    transform: translate3d(0,0,0);

    opacity: 1;


}

.box:hover p{

     -webkit-transform: translate3d(0,0, 0);
    transform: translate3d(0,0,0);
    opacity: 1;


}
.text{
    position: absolute;
}