CSS3 图片Hover效果变灰色

一段从国外网站上拷贝的,觉得很不错,就分享了
对于图片样式.featured-image标签的img元素,当鼠标移至图片上方,图片颜色在1.5s内变成灰色,效果不错,不多你在使用时可以对一下图片进行适当修改调整

<code>
.featured-image img{
    max-width: 100%;
    width: 100%;
    height: auto;
    float: left;
    display: inline-block;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    -webkit-transition: 1.5s ease-in;  
    -moz-transition: 1.5s ease-in;  
    -o-transition: 1.5s ease-in;  
    transition: 1.5s ease-in; 
    filter: none;
    -webkit-filter: none;
}

.featured-image img:hover {
    
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
    -webkit-transition: 1.5s ease-in;  
    -moz-transition: 1.5s ease-in;  
    -o-transition: 1.5s ease-in;  
    transition: 1.5s ease-in; 
}

</code>

0 thoughts on “CSS3 图片Hover效果变灰色
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。