hover：

在前端开发中经常会遇到项目展示，往往会采用卡片方式来描述。众多网站中，普遍采用CSS3的scale()方法来实现交互。

本文即是利用纯CSS实现图片居中缩放，此类方法各大网站均有应用，以此可以延伸出更多方式，比如遮罩亦可以使用圆形，不规则矩形等。

本文采用矩形实例，文末链接采用圆形头像实例。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>CSS3实现图片居中，hover缩放遮罩的效果</title>

     <style type="text/css">

     /*遮罩层*/

     .wrap{

         height:200px;

         width:200px;

         margin: 300px auto;

         justify-content:center;

         align-items:center;

         display:-webkit-flex;

         overflow: hidden;

     }

     /*图片div*/

     .tom{

         height:200px;

         width:200px;

     }

     /*图片初始效果*/

     .tom img{

         width: 100%;

         height: 100%;

         /*图片过渡效果*/

         transition: all 0.8s ease;

         /*图片初始添加黑白滤镜*/

         filter:grayscale(100%);

     }

     /*图片hover效果*/

      .tom img:hover{

         /*图片缩放*/

          transform: scale(1.5);

         /*图片恢复全彩*/

          filter:grayscale(0%);

      }

     </style>

 </head>

 <body>

     <!-- 外遮罩 -->

     <div class="wrap">

         <!-- 图片 -->

         <div class="tom">

             <img src="http://www.cdtu6129.cn/img/tom.jpg">

         </div>

     </div>

 </body>

 </html>

点击链接查看实例

如有疑问，欢迎指出。

CSS3实现图片黑白滤镜居中，hover缩放遮罩的效果的更多相关文章

  1. Swift - 给图片添加滤镜效果（棕褐色老照片滤镜，黑白滤镜）

    Core Image是一个强大的滤镜处理框架.它除了可以直接给图片添加各种内置滤镜,还能精确地修改鲜艳程度, 色泽, 曝光等,下面通过两个样例演示如何给UIImage添加滤镜. 1,棕褐色滤镜  -  ...

  2. css3 实现图片等比例放大与缩小

    css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...

  3. 纯洁CSS3实现图片墙

    预赛 DIV+CSS基金会 CSS3的transform 和 transition说明 主要用于transform的rotate/scale 动画过渡的几个參数(transition-property ...

  4. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

  5. jQuery/CSS3实现图片层叠展开特效

    这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...

  6. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  7. css3实现图片旋转效果

    css3实现图片旋转效果 近期实现一个消息提醒(醒目)的需求页面.想到了css3的旋转动画,故使用. =============== 鼠标悬浮时候,图片可以旋转,放大 rotate(360deg) s ...

  8. CSS3实现图片木桶布局

    CSS3实现图片木桶布局 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <script> window.navigator.appVersion.inde ...

  9. 纯css3实现图片三角形排列

    当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 在线预览    ...

随机推荐

  1. javascript 异常处理

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. uwsgi + nginx 部署python项目（一）

    uWSGI uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中HttpUwsgiModule的作用是与uWSGI服务器进行交换. 要注意 WSGI / uws ...

  3. java通过正则进行语法分析实现表达式的逻辑判断和复杂计算实现

    首先功能展示: 相关功能实现,实现功能类似js,弱语言类型: 1.核销语法解析使用正则校验和匹配实现处理,每一行是一个完整表达式 2.有系统变量使用,内置的变量可直接获取值进行相关逻辑和条件计算 3. ...

  4. BAT推荐免费下载JAVA转型大数据开发全链路教程（视频+源码）价值19880元

    如今随着环境的改变,物联网.AI.大数据.人工智能等,是未来的大趋势,而大数据是这些基石,万物互联,机器学习都是大数据应用场景! 为什么要学习大数据?我们JAVA到底要不要转型大数据? 好比问一个程序 ...

  5. Codeforces 1262E Arson In Berland Forest（二维前缀和+二维差分+二分）

     题意是需要求最大的扩散时间,最后输出的是一开始的火源点,那么我们比较容易想到的是二分找最大值,但是我们在这满足这样的点的时候可以发现,在当前扩散时间k下,以这个点为中心的(2k+1)2的正方形块内必 ...

  6. idea 代码部分格式化

    效果: 处理Idea使用ctrl+alt+L进行代码格式化时部分代码可以被忽略,不执行格式化功能(webstorm,phpstorm同理) 原因: 有时希望自己写的一些代码不被格式化,或者发现格式化后 ...

  7. APP登录时Token认证过程

    1.App登录Token登录机制: 一般第一次安装App后,会让你进行注册后登录,而只要登录成功后,以后的每次启动App都是登录状态, 不需要每次启动时再登录.但有些App你若长期没有启动,它会提示你 ...

  8. MySQL explain，type分析（转）

    问题:explain结果中的type字段代表什么意思? MySQL的官网解释非常简洁,只用了3个单词:连接类型(the join type).它描述了找到所需数据使用的扫描方式. 最为常见的扫描方式有 ...

  9. css兼容问题收集+部分效果收集+css重置

    1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...

  10. npm发布包

    一.发布一个新包第一步:进入要发布的项目根目录,初始化为npm包: npm init 依次按提示填入包名.版本.描述.github地址.关键字.license等 这步完成之后会生成一个package. ...