悬停效果一直是一个有趣的话题的探讨。在过去，我们已经建立了一些可怕的例子CSS徘徊，容易复制并粘贴到你的代码。
今天，我们要遵循了十个新的专门用于图像的影响。每个例子都带有一个HTML和CSS代码，你可以偷一个现场演示，你可以看到它在行动。
偷窥
在我们开始之前，请看下面的演示，看到所有的各种各样的悬停效果，我们将建筑。
演示： 点击这里发射。
安装程序
在我们开始创建单独的演示，一些基本的设置是必需的。这里的CSS块，我们将使用支配所有例子的基本面貌。
|
01
02
03
04
05
06
07
08
09
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
|
<trans data-src="* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background
:
#333
;
}
.pic {
border
:
10px
solid
#fff
;
float
:
left
;
height
:
300px
;
width
:
300px
;
margin
:
20px
;
overflow
:
hidden
;
-webkit-box-shadow:
5px
5px
5px
#111
;
box-shadow:
5px
5px
5px
#111
;
}">* {
WebKit盒尺寸：边界盒；
-moz盒尺寸：边界盒；
MS盒尺寸：边界盒；
盒尺寸：边界盒；
}
体{
背景：#
333
；
}
。PIC {
边境：
10px
solid
# FFF；
浮动：左；
高度：
300px
；
宽度：
300px
；
保证金：
20px
；
溢出：隐藏
；</trans>
|
这是最基本的东西：盒尺寸允许我们操纵箱模型（感到自由使用更具体地说，如果你不喜欢通用选择器），和PIC课给了我们一个地方扔在一些通用的造型为一张照片。
变焦和摇摄
我们的第一组的影响，利用隐藏溢出的一些技巧。通过剪裁图像到一个div的界限，我们可以把一些很酷的徘徊。
这里的四个演示悬停效果在行动：
演示： 点击这里发射。
成长
开始的时候，我们会这样做，当用户将鼠标悬停在该图像，照片放大的同时仍保持在自己的活动范围内，导致在一个放大的影响。这里的HTML。
HTML
|
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="grow pic">
<
img
src="http://www.odaad.com/d/file/zuoping/activity/2012-11-18/cfd4e5dcad42820f83ef58115a419eca.jpg" alt="portrait">
</
div
>">＜div class=“成长的照片”>
<
img
src
=
"
"http://www.odaad.com/d/file/zuoping/activity/2012-11-18/cfd4e5dcad42820f83ef58115a419eca.jpg"alt=“肖像”"
>
＜／div ></
trans
>
|
正如你所看到的，我们使用“图片”类从以前一直以“成长”类。像往常一样，我们的图片是被端上的礼貌你的像素。请注意，我们这里用的图像是由400像素的400像素。现在让我们看看CSS。
CSS
|
01
02
03
04
05
06
07
08
09
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
|
<trans data-src="
/*GROW*/
.grow img {
height
:
300px
;
width
:
300px
;
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.grow img:hover {
width
:
400px
;
height
:
400px
;
}">*长* / /
。img {成长
高度：
300px
；
宽度：
300px
；
WebKit的过渡：所有
1
s缓解；
-moz过渡：所有
1
s缓解；
- O转换：所有
1
s缓解；
MS过渡：所有
1
s缓解；
过渡：所有
1
s缓解；
}
。</trans>
|
我们在这里做的是专门针对图像标签，设置高度为300px广场然后增加至400像素广场，当用户将鼠标悬停。再次，因为我们有溢出设置隐藏，这将导致一个放大效应。
收缩
我们已经看到了如何增加图像在盘旋，所以让我们逆转这一效应和放大照片。该方法是完全相同的，只是这一次你会开始在400像素尺寸缩小为300px在盘旋。
HTML
|
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="shrink pic">
</
div
>">＜div class=“收缩照片”>
＜／div ></
trans
>
|
CSS
|
01
02
03
04
05
06
07
08
09
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
|
<trans data-src="
/*SHRINK*/
.shrink img {
height
:
400px
;
width
:
400px
;
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.shrink img:hover {
width
:
300px
;
height
:
300px
;
}">/* * /
收缩。收缩img {
高度：
400
像素；
宽度：
400
像素；
WebKit的过渡：所有
1
s缓解；
-moz过渡：所有
1
s缓解；
- O转换：所有
1
s缓解；
MS过渡：所有
1
s缓解；
过渡：所有
1
s缓解；
}
。</trans>
|
侧畔
未来的效果使图像大小相同的始终，但它侧身为用户将锅。你可以看到在我们踢的例子，这是传达一种行动的一个好方法。
HTML
|
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="sidepan pic">
</
div
>">＜div class=“sidepan PIC”>
＜div＞/</
trans
>
|
在这里，我们使用的是一个形象的600px宽，但只有300px高。因为我们缩放横盘，我们不需要任何额外的高拔出效应。
CSS
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<trans data-src="
/*SIDEPAN*/
.sidepan img {
margin-left
:
0px
;
-webkit-transition: margin
1
s ease;
-moz-transition: margin
1
s ease;
-o-transition: margin
1
s ease;
-ms-transition: margin
1
s ease;
transition: margin
1
s ease;
}
.sidepan img:hover {
margin-left
:
-200px
;
}">sidepan * / * /
。sidepan img {
margin-left
:
0px
；
WebKit的过渡：缘
1
缓解；
-moz过渡：缘
1
缓解；
- O转换：缘
1
缓解；
MS过渡：缘
1
缓解；
过渡：缘
1
缓解
；
}
sidepan IMG。</trans>
|
为泛，我们不会改变图像的大小，像上次一样，而是使用边缘拉图像左在盘旋。如果你想向右移动，用积极的价值或保证金的权利。
立盘
立式锅可以非常好。再次，我会利用这一效应传达一种运动，但这也是伟大的交流高如果你想泛起来像一个高大的建筑物。在我们的照片有助于推动这一概念的悬崖。
HTML
|
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="vertpan pic">
</
div
>">＜div class=“vertpan PIC”>
＜div＞/</
trans
>
|
上次我们用了一个形象，为600px的300px，这次我们会翻转，到一张照片，是由600px 300px。
CSS
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<trans data-src="
/*VERTPAN*/
.vertpan img {
margin-top
:
0px
;
-webkit-transition: margin
1
s ease;
-moz-transition: margin
1
s ease;
-o-transition: margin
1
s ease;
-ms-transition: margin
1
s ease;
transition: margin
1
s ease;
}
.vertpan img:hover {
margin-top
:
-200px
;
}">vertpan * / * /
。vertpan img {
上边距：
0px
；
WebKit的过渡：缘
1
缓解；
-moz过渡：缘
1
缓解；
- O转换：缘
1
缓解；
MS过渡：缘
1
缓解；
过渡：缘
1
缓解
；
}
vertpan IMG。</trans>
|
因为上次相同的钻头，只有我们用边缘上而不是左边距。这将导致图像的顶部是在默认情况下，图像的底部进入视图在盘旋。
有趣的变换
我们下一节的影响是更疯狂一点。我们将从一个简单的倾斜，然后跳到一些真正独特和有趣的徘徊。
这是行动中的三大效应演示：
演示： 点击这里发射。
倾斜的
这是一个超级简单，所有我们要做的就是旋转图像略当用户将鼠标悬停在这。其结果是一个基本的但是有趣的歪挂画的幻觉。
HTML
|
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="tilt pic">
</
div
>">＜div class=“倾斜PIC”>
＜／div ></
trans
>
|
CSS
|
01
02
03
04
05
06
07
08
09
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
|
<trans data-src="
/*TILT*/
.tilt {
-webkit-transition:
all
0.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
-ms-transition:
all
0.5
s ease;
transition:
all
0.5
s ease;
}
.tilt:hover {
-webkit-transform: rotate(
-10
deg);
-moz-transform: rotate(
-10
deg);
-o-transform: rotate(
-10
deg);
-ms-transform: rotate(
-10
deg);
transform: rotate(
-10
deg);
}">* / * /
倾斜。倾斜{
WebKit的过渡：所有
0.5
s缓解；
-moz过渡：所有
0.5
s缓解；
- O转换：所有
0.5
s缓解；
MS过渡：所有
0.5
s缓解；
过渡：所有
0.5
s缓解；
}
倾斜：悬停。{
WebKit的变换：旋转（
10
度）；
-moz变换：旋转（
10
度）；
- o-transform：旋转（
10
度）；
MS变换</trans>
|
正如你所看到的，我们要做的就是图像旋转十度。简单而有效！请注意，这一次，我们的目标是类本身，而不是图像。
变形
这是哪里来的疯狂。上面的图像并不真的这一正义，一定要查看演示。现在的情况就是，当用户将鼠标悬停，图像开始旋转。当它旋转时，它的变种，由方形变成了圆形。其结果是超好玩。
HTML
|
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="morph pic">
</
div
>">＜div class=“变身PIC”>
＜div＞/</
trans
>
|
CSS
|
01
02
03
04
05
06
07
08
09
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
|
<trans data-src="
/*MORPH*/
.morph {
-webkit-transition:
all
0.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
-ms-transition:
all
0.5
s ease;
transition:
all
0.5
s ease;
}
.morph:hover {
border-radius:
50%
;
-webkit-transform: rotate(
360
deg);
-moz-transform: rotate(
360
deg);
-o-transform: rotate(
360
deg);
-ms-transform: rotate(
360
deg);
transform: rotate(
360
deg);
}">／＊型* /
。变身{
WebKit的过渡：所有
0.5
s缓解；
-moz过渡：所有
0.5
s缓解；
- O转换：所有
0.5
s缓解；
MS过渡：所有
0.5
s缓解；
过渡：所有
0.5
s缓解；
}
形态：悬停。{
边界半径：
50%
；
WebKit的变换：旋转（
360
°）；
-moz变换：旋转（
360
°）；
- o-transform：旋转（
360
°）；</trans>
|
我在这里做的是设置变形类旋转360度在盘旋。当它旋转的边界半径，将逐步上升到50%的方式，导致在一个圈。
集中注意力
这里的另一个古怪的人，利用边界半径的圆的图像。虽然这一次，我们不仅会增加边界半径也是其厚度。结合边界框，这将创建一个效果，主要集中在对图像的特定部分。
HTML
|
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="focus pic">
</
div
>">＜div class=“焦点图”>
＜div＞/</
trans
>
|
CSS
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<trans data-src="
/*FOCUS*/
.focus {
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.focus:hover {
border
:
70px
solid
#000
;
border-radius:
50%
;
}">／＊焦点* /
。焦点{
WebKit的过渡：所有
1
s缓解；
-moz过渡：所有
1
s缓解；
- O转换：所有
1
s缓解；
MS过渡：所有
1
s缓解；
过渡：所有
1
s缓解；
}
重点：悬停。{
边境：
70px
</trans>
|
我在这里所做的事是把我们的白边，把它变成一个70px黑色边界而起动半径达50%像我们一样在最后一个例子。
WebKit的过滤器
最后一组的影响是纯粹的实验。不像上面的例子，都是使用多个前缀，以确保最大的浏览器的兼容性，这些只能使用WebKit的前缀，因为目前没有其他支持的。如果你不使用Safari和Chrome，这些不会为你工作。
尽管不幸的约束，WebKit过滤器让你执行一些非常棒的影响！这是我最喜欢的一个演示三：
演示： 点击这里发射。
模糊的
我们要的是一个简单的模糊效果。长有人试图模糊像素与CSS单独和现在它可能与最终代码的一小线！
HTML
|
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="blur pic">
</
div
>">＜div class=“模糊的照片”>
＜div＞/</
trans
>
|
CSS
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<trans data-src="
/*BLUR*/
.blur img {
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.blur img:hover {
-webkit-filter: blur(
5px
);
}">／＊模糊* /
img {
。模糊
WebKit的过渡：所有
1
s缓解；
-moz过渡：所有
1
s缓解；
- O转换：所有
1
s缓解；
MS过渡：所有
1
s缓解；
过渡：所有
1
s缓解；
}
。模糊IMG：悬停{
</trans>
|
正如你所看到的，我们使用WebKit的过滤器属性，然后设置模糊半径为5px。这就是全部。
B & W
这一次我们将放弃所有的饱和度的图像在盘旋。用两个图像，拔出这种效果但WebKit的过滤器，我们可以把这归结于一个。
HTML
|
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="bw pic">
</
div
>">＜div class=“黑白照片”>
＜／div ></
trans
>
|
CSS
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<trans data-src="
/*B&W*/
.bw {
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.bw:hover {
-webkit-filter: grayscale(
100%
);
}">B & W * / * /
。BW {
WebKit的过渡：所有
1
s缓解；
-moz过渡：所有
1
s缓解；
- O转换：所有
1
s缓解；
MS过渡：所有
1
s缓解；
过渡：
1
}
缓解；
BW：{
盘旋。</trans>
|
在这里我设置的灰度值为100%。如果你只想放弃一些饱和了，试着把这个号码。
照亮
我们最后的把戏，我们要将一张照片在默认情况下，然后让它到它的正常状态，在盘旋。这形成了一种显示效果。
|
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="brighten pic">
</
div
>">＜div class=“照亮照片”>
＜／div ></
trans
>
|
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<trans data-src="
/*DARKEN*/
.brighten img {
-webkit-filter: brightness(
-65%
);
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.brighten img:hover {
-webkit-filter: brightness(
0%
);
}">／＊暗* /
。img {
照亮
WebKit的过滤器：亮度（
65%
）；
WebKit的过渡：所有
1
s缓解；
-moz过渡：所有
1
s缓解；
- O转换：所有
1
s缓解；
MS过渡：
1
缓解；过渡：所有
1
s缓解；
}
。照亮IMG：悬停{</trans>
|
在这里，0%是定期的亮度。什么，你照亮了图像，任何低于你变暗。我们开始在65%和把它上升到0%在盘旋。
备注：英文很穷,翻译不是很细，只能勉强看哦
748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
