hover：

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

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

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title>CSS3实现图片居中，hover缩放遮罩的效果</title>
  6.      <style type="text/css">
  7.      /*遮罩层*/
  8.      .wrap{
  9.          height:200px;
  10.          width:200px;
  11.          margin: 300px auto;
  12.          justify-content:center;
  13.          align-items:center;
  14.          display:-webkit-flex;
  15.          overflow: hidden;
  16.      }
  17.      /*图片div*/
  18.      .tom{
  19.          height:200px;
  20.          width:200px;
  21.      }
  22.      /*图片初始效果*/
  23.      .tom img{
  24.          width: 100%;
  25.          height: 100%;
  26.          /*图片过渡效果*/
  27.          transition: all 0.8s ease;
  28.          /*图片初始添加黑白滤镜*/
  29.          filter:grayscale(100%);
  30.      }
  31.      /*图片hover效果*/
  32.       .tom img:hover{
  33.          /*图片缩放*/
  34.           transform: scale(1.5);
  35.          /*图片恢复全彩*/
  36.           filter:grayscale(0%);
  37.       }
  38.      </style>
  39.  </head>
  40.  <body>
  41.      <!-- 外遮罩 -->
  42.      <div class="wrap">
  43.          <!-- 图片 -->
  44.          <div class="tom">
  45.              <img src="http://www.cdtu6129.cn/img/tom.jpg">
  46.          </div>
  47.      </div>
  48.  </body>
  49.  </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. 基于 Timer是一种定时器工具

    没有依赖 通过Timer中的schedule方法启动定时任务 一般不采用此方法 /** * ------------------------------------------------------ ...

  2. 【转】mysqldump原理探究

    作者:胡儿胡儿 来源:CSDN 原文:https://blog.csdn.net/cug_jiang126com/article/details/49824471 —————————————————— ...

  3. 自己手动用原生实现bind/call/apply

    自己手动用原生实现bind/call/apply:https://www.cnblogs.com/LHLVS/p/10595784.html

  4. ls 命令通配符（3）

    使用过正则的人应该很熟悉通配符.如果非要解释的话,我找来一段: 通配符是一种特殊语句,主要有星号(*)和问号(?),用来模糊搜索文件. 当查找文件夹时,可以使用它来代替一个或多个真正字符:当不知道真正 ...

  5. Linux — 基础知识

    一 从认识操作系统开始 1.1 操作系统简介 我通过以下四点介绍什么操作系统: 操作系统(Operation System,简称OS)是管理计算机硬件与软件资源的程序,是计算机系统的内核与基石: 操作 ...

  6. GridView做加

    原文:http://www.cnblogs.com/insus/archive/2012/09/22/2697862.html 下面是Insus.NET实现演示: CObj.cs代码: using S ...

  7. 常用的前端框架Angular、React、Vue

    VUE 一.vue导读 1.1 vue的优点:结合其他框架点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式,组件化开发,单页面应用 1.2 vue环境的导入: 本地导入 <!--方法 ...

  8. ST7735和ST7789驱动

    /* Define to prevent recursive inclusion -------------------------------------*/ #ifndef __LCD_H #de ...

  9. MongoDB与python 交互

    一.安装pymongo 注意 :当同时安装了python2和python3,为区分两者的pip,分别取名为pip2和pip3. 推荐:https://www.cnblogs.com/thunderLL ...

  10. Linux日常之显示文件总结

    1. 将文件file1.file2的内容都显示出来,并显示行号 cat -n file1 file2 2. 将文件file1.file2中带有字符'h'的行显示出来 cat -n file1 file ...