悬停时放大

CSS####

.modules .thumb img{
    -webkit-filter: grayscale(1);
    filter: grayscale(1);   //CSS3 黑白滤镜属性 1为黑白
    -moz-transform: translate(-50%, -50%) scale(0.7);
    -ms-transform: translate(-50%, -50%) scale(0.7); 
    -webkit-transform: translate(-50%, -50%) scale(0.7);
    transform: translate(-50%, -50%) scale(0.7);
    -moz-transition: all 0.3s;-o-transition: all 0.3s; 
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.modules .module:hover img {
    -webkit-filter: grayscale(0);  //CSS3 黑白滤镜属性 0为原色
    filter: grayscale(0);
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1); 
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

参考网站：
http://easyrocketstudio.com/

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 用CSS控制图片悬停时放大
    .team1 div.pic{float:left; width:50%;overflow:hidden; pos...
    卡卡西哥哥阅读 463评论 0赞 0
  • 网页前端资源整合
    作为一个前端程序猿，下面这些站会让你眼前一亮。 amazeui框架组建丰富 http://amazeui.org...
    欧巴冰冰阅读 8,914评论 18赞 303
  • 我“纸”对你好
    这个世界，"纸"对你好！ 什么是HHA蜂浆纸，你肯定会说，是不是就是一张纸，可以写字吗？可以吃吗？哈哈...
    努力的刘木木阅读 309评论 0赞 0
  • 简书的写作是一种云技术的写作
    那么简书是否可以开发一个云写手的工具？ 什么是云写手？ 当你在线写作的时候，是否有过一提交，网页坏了，辛辛苦苦写的...
    圆视宇宙阅读 422评论 2赞 1
  • 活着
    “ 为什么正好是这个，而不是其他？为什么这个特殊的自我，不住在鸟巢？而在屋子里，身体封存于皮肤，而不是鳞片？顶部不...
    林沐夏阅读 394评论 0赞 0