JSDM

HTML

 
1
<!doctype html>
You don't need a DOCTYPE on CodePen. Just put here what you would normally put in the <body>.
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>悬浮特效</title>
6
    <link rel="stylesheet" href="css/contentHover.css"/>
7
</head>
8
<body>
9
    <div class="container">
10
        <div class="grid">
11
            <figure class="effect-lily">
12
                <img src="1.jpg" alt=""/>
13
                <figcaption>
14
                    <h2>我是一个标题</h2>
15
                    <p>我是一个段落</p>
16
                    <a href="#"></a>
17
                </figcaption>
18
            </figure>
19
        </div>
20
    </div>
21
</body>
22
</html>
!

CSS

​x
 
1
*, *:after, *:before {box-sizing: border-box; padding: 0;margin: 0;}
2
.clearfix:before, .clearfix:after { content: ''; display: table; }
3
.clearfix:after { clear: both; }
4
​
5
body {
6
    background: #f6f9fa;
7
    color: #536d76;
8
    font-weight: 400;
9
    font-size: 1em;
10
    font-family: 'Raleway', Arial, sans-serif;
11
}
12
​
13
a {
14
    color: #4f7f90;
15
    text-decoration: none;
16
    outline: none;
17
}
18
​
19
a:hover, a:focus {
20
    color: #39545e;
21
}
22
​
23
section {
24
    padding: 1em;
25
    text-align: center;
26
}
27
.container{
28
    width: 100%;
29
}
30
.container figure{
31
    width: 30%;
32
}
33
.grid figure {
34
    position: relative;
35
    z-index: 1;
36
    display: inline-block;
37
    overflow: hidden;
38
    margin: -0.135em;
39
    width: 33.333%;
40
    height: 400px;
41
    background: #3085a3;
42
    text-align: center;
43
    cursor: pointer;
44
}
45
​
46
.grid figure img {
47
    position: relative;
48
    display: block;
49
    min-height: 100%;
50
    opacity: 0.8;
51
}
52
​
53
.grid figure figcaption {
54
    padding: 2em;
55
    color: #fff;
56
    text-transform: uppercase;
57
    font-size: 1.25em;
58
    -webkit-backface-visibility: hidden;
59
    backface-visibility: hidden;
60
}
61
​
62
.grid figure figcaption::before,
63
.grid figure figcaption::after {
64
    pointer-events: none;
65
}
66
​
67
.grid figure figcaption,
68
.grid figure a {
69
    position: absolute;
70
    top: 0;
71
    left: 0;
72
    width: 100%;
73
    height: 100%;
74
}
75
​
76
​
77
​
78
​
79
​
80
​
81
figure.effect-lily img {
82
    width: -webkit-calc(100% + 50px);
83
    width: calc(100% + 50px);
84
    opacity: 0.7;
85
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
86
    transition: opacity 0.35s, transform 0.35s;
87
    -webkit-transform: translate3d(-40px,0, 0);
88
    transform: translate3d(-40px,0,0);
89
}
90
​
91
figure.effect-lily figcaption {
92
    top: auto;
93
    bottom: 0;
94
    height: 50%;
95
    text-align: left;
96
}
97
​
98
figure.effect-lily h2,
99
figure.effect-lily p {
100
    -webkit-transform: translate3d(0,40px,0);
101
    transform: translate3d(0,40px,0);
102
}
103
​
104
figure.effect-lily h2 {
105
    -webkit-transition: -webkit-transform 0.35s;
106
    transition: transform 0.35s;
107
}
108
​
109
figure.effect-lily p {
110
    color: rgba(255,255,255,0.6);
111
    opacity: 0;
112
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
113
    transition: opacity 0.2s, transform 0.35s;
114
}
115
​
116
figure.effect-lily:hover img,
117
figure.effect-lily:hover p {
118
    opacity: 1;
119
}
120
​
121
figure.effect-lily:hover img,
122
figure.effect-lily:hover h2,
123
figure.effect-lily:hover p {
124
    -webkit-transform: translate3d(0,0,0);
125
    transform: translate3d(0,0,0);
126
}
127
​
128
figure.effect-lily:hover p {
129
    -webkit-transition-delay: 0.05s;
130
    transition-delay: 0.05s;
131
    -webkit-transition-duration: 0.35s;
132
    transition-duration: 0.35s;
133
}
134
figure.effect-lily img {
135
    width: -webkit-calc(100% + 50px);
136
    width: calc(100% + 50px);
137
    opacity: 0.7;
138
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
139
    transition: opacity 0.35s, transform 0.35s;
140
    -webkit-transform: translate3d(-40px,0, 0);
141
    transform: translate3d(-40px,0,0);
142
}
143
​
144
figure.effect-lily figcaption {
145
    top: auto;
146
    bottom: 0;
147
    height: 50%;
148
    text-align: left;
149
}
150
​
151
figure.effect-lily h2,
152
figure.effect-lily p {
153
    -webkit-transform: translate3d(0,40px,0);
154
    transform: translate3d(0,40px,0);
155
}
156
​
157
figure.effect-lily h2 {
158
    -webkit-transition: -webkit-transform 0.35s;
159
    transition: transform 0.35s;
160
}
161
​
162
figure.effect-lily p {
163
    color: rgba(255,255,255,0.6);
164
    opacity: 0;
165
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
166
    transition: opacity 0.2s, transform 0.35s;
167
}
168
​
169
figure.effect-lily:hover img,
170
figure.effect-lily:hover p {
171
    opacity: 1;
172
}
173
​
174
figure.effect-lily:hover img,
175
figure.effect-lily:hover h2,
176
figure.effect-lily:hover p {
177
    -webkit-transform: translate3d(0,0,0);
178
    transform: translate3d(0,0,0);
179
}
180
​
181
figure.effect-lily:hover p {
182
    -webkit-transition-delay: 0.05s;
183
    transition-delay: 0.05s;
184
    -webkit-transition-duration: 0.35s;
185
    transition-duration: 0.35s;
186
}
187
​
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
​
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................