只用CSS，图像可以实现和兼容性看起来不错的15种悬停效果
所以有人想要的是通过列出的步行运动为自己，然后分享。正如添加效果的链接或按钮的时间徘徊，它是在你想给的东西效果即使在图像上悬停时的时间可能使用效果的样本。由于大量使用CSS3不支持所有的浏览器，这两者只使用CSS来实现，被缩放滑块黑色和白色模糊闪光灯，有15种。
常见的HTML CSS·
样品已经使用HTML，如下面的代码，还规定了以下内容作为CSS共同风格。 由于还存在指定CSS的宽度和高度的一部分，请调整至适合他们到自己的环境中时，它仅作参考。
HTML
<figure>
<img src="image.jpg" />
</figure>CSS
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}此外，因为它使用的每个动画GIF引入运动，实际移动和显示可以在下面的演示页面发现。
只用CSS，图像可以实现和兼容性看起来不错的15种悬停效果
1.放大＃1
那些在悬停时的图像落实了扩大如下CSS，实施描述。 当你想改变倍率
scale的值，当你想改变，如速度transition，请分别改变任何东西的价值。CSS
figure img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}实际运动可以在下面找到。
2.放大＃2
同样的事情，比如图像被放大在悬停的时间，但这里
img的width改变来改变图像大小，你可以用的感觉，不像早期的表现。 该CSS是一个实现描述如下。CSS
figure img {
width: 300px;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
width: 350px;
}实际运动可以在下面找到。
3.缩小＃1
“ 1.放大＃1中的图像的效果在介绍悬停时的反向版本”展开，就在悬停的时候
scale，但我们通过在初始状态时增加值增加的价值，在这里提前，在悬停时通过降低值的图像是要缩小的效果的实现。 该CSS是一个实现描述如下。CSS
figure img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}实际运动可以在下面找到。
4.缩小＃2
这是“ 2放大＃2中的影响而发生反向版本来放大在引入时的图像悬停在”，如下所述CSS的实施进行说明。
CSS
figure img {
width: 400px;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
width: 300px;
}实际运动可以在下面找到。
5.滑动
事先margin应被放置在使用的图像的位置稍微移位，即在悬停的时间margin是什么通过擦除标记的影响，如滑动幻灯片图像。 该CSS是一个实现描述如下。
※只要所使用的图像的宽度是比“要面积+幻灯片要被显示的距离”时，scale你的指定不需要。
CSS
figure img {
margin-left: 30px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
margin-left: 0;
}实际运动可以在下面找到。
6.旋转（+缩小）
在悬停的时候那些图片给旋转的效果，进一步“ 3.缩小＃1是个什么形象也补充说，在悬停的介绍的时候缩小效应”。 描述如下CSS于旋转角度执行
rotate一个，放大倍率scale可以通过改变每个的值被改变为任何移动。CSS
figure img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}实际运动可以在下面找到。
7.模糊
filter这是一个模糊效果的图像使用，但将是东西，此时的样品释放那些模糊预处理效果，在当时徘徊的，也apparent’re与模糊效果时，悬停在反向I. CSS是，如果你想调整在下面的示例源模糊效果：实现描述如下blur(3px)，请更改已被指定为对所有这些的价值点。CSS
figure img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
-webkit-filter: blur(0);
filter: blur(0);
}实际运动可以在下面找到。
8.灰阶
同时
filter使用，这里是图像的灰度转换。 该CSS是一个实现描述如下。CSS
figure img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}实际运动可以在下面找到。
9.棕褐色
这里还
filter使用了该类型的，它是由图像转换为深褐色调获得。 该CSS是一个实现描述如下。CSS
figure img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
-webkit-filter: sepia(0);
filter: sepia(0);
}实际运动可以在下面找到。
10.模糊+灰度
CSS
figure img {
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
-webkit-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}实际运动可以在下面找到。
11.不透明度＃1
这也是经常看到的实施，在悬停的时候
opacity是用传输的事情。 该CSS是一个实现描述如下。CSS
figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
opacity: .5;
}实际运动可以在下面找到。
12.不透明度＃2
在同一个悬停和更早
opacity的是，使用传输的事情，但图像的父元素（在此示例中figure只对背景颜色的名字），你也可以稍微不同的方式来显示。 该CSS是一个实现描述如下。CSS
figure {
background: #1abc9c;
}
figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
opacity: .5;
}实际运动可以在下面找到。
13.闪烁
也是用这个博客是，它是在悬停的时候什么样的形象给了像闪烁了一下一个效果。 该CSS是一个实现描述如下。
CSS
figure:hover img {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}实际运动可以在下面找到。
14.服务
这是更智能和通用的高描述方法有可能的，但是这基兰和光得到的效果，如从悬停的时间从左向右流动。 该CSS是一个实现描述如下。
CSS
figure {
position: relative;
}
figure::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
figure:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}实际运动可以在下面找到。
15.圈
是什么给了连锁反应，如谷歌的材质设计，在使用的时候徘徊。 该CSS是一个实现描述如下。
CSS
figure {
position: relative;
}
figure::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255,255,255,.2);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
figure:hover::before {
-webkit-animation: circle .75s;
animation: circle .75s;
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}实际运动可以在下面找到。
以上，这是形象与良好的兼容可能将徘徊，只能在CSS实现的效果。 当然，根据相应的浏览器，但由于这种方式只能轻易多种如果浏览器没有问题，如何显示CSS，什么页面，如图像一字排开很多，如照片库页我认为，当你想用它的效果是非常有用的。 另外，我在以前这个博客中写道“ 标题效果20只实现在CSS中还建议在组合使用”，在这里也因为它只能在CSS可以很容易地实现，就看也在这里，如果你有兴趣请尝试探测。
这里除了它在所有的方式引入，如果有，可以在CSS实现也请告诉我一个有趣的效果:)
本文转载自nxworld,仅作技术分享。点击阅读原文