CSS3实现图片黑白滤镜居中，hover缩放遮罩的效果
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缩放遮罩的效果的更多相关文章
- Swift - 给图片添加滤镜效果（棕褐色老照片滤镜，黑白滤镜）
Core Image是一个强大的滤镜处理框架.它除了可以直接给图片添加各种内置滤镜,还能精确地修改鲜艳程度, 色泽, 曝光等,下面通过两个样例演示如何给UIImage添加滤镜. 1,棕褐色滤镜 - ...
- css3 实现图片等比例放大与缩小
css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...
- 纯洁CSS3实现图片墙
预赛 DIV+CSS基金会 CSS3的transform 和 transition说明 主要用于transform的rotate/scale 动画过渡的几个參数(transition-property ...
- CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
- jQuery/CSS3实现图片层叠展开特效
这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...
- 使用纯css3实现图片轮播
<!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...
- css3实现图片旋转效果
css3实现图片旋转效果 近期实现一个消息提醒(醒目)的需求页面.想到了css3的旋转动画,故使用. =============== 鼠标悬浮时候,图片可以旋转,放大 rotate(360deg) s ...
- CSS3实现图片木桶布局
CSS3实现图片木桶布局 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <script> window.navigator.appVersion.inde ...
- 纯css3实现图片三角形排列
当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 在线预览 ...
随机推荐
- 2019 java学习 第二周总结
新学期,新气象,新老师,不同的语言学习. 我已经荒废了大一,感觉自己在大一根本没学啥,可能是自己太贪玩了,导致自己学的不精,自己对其他的见解很少. 也有自大的原因,导致自己一直浮在水平面,有实力,有耐 ...
- 查看Dubbo服务-通过zk客户端
一.基本概念 https://www.cnblogs.com/huasky/p/8268568.html 二.下载与安装 1.进入要下载的版本的目录,选择.tar.gz文件下载 下载链接:http:/ ...
- Skiing POJ 3037 很奇怪的最短路问题
Skiing POJ 3037 很奇怪的最短路问题 题意 题意:你在一个R*C网格的左上角,现在问你从左上角走到右下角需要的最少时间.其中网格中的任意两点的时间花费可以计算出来. 解题思路 这个需要发 ...
- 洛谷 P1631 序列合并（优先队列）
传送门 解题思路 首先读入a.b数组后,sort一遍(从小到大),然后把a[1]+b[1],a[2]+b[1],a[3]+b[1]……a[n]+b[1]全部加入一个优先队列q(小根堆). 然后从一到n ...
- web 过滤器 Filter、 Spring 拦截器 interceptor
1.过滤器(Filter)(在web.xml中注册过滤器) 首先说一下Filter的使用地方,我们在配置web.xml时,总会配置下面一段设置字符编码,不然会导致乱码问题: <filter> ...
- element ui 选择期 传对象
<template> <el-select value-key="label" v-model="value" placeholder=&qu ...
- lspci - 列出所有PCI设备
总览 SYNOPSIS lspci [options] 描述 DESCRIPTION lspci 是一个用来显示系统中所有PCI总线设备或连接到该总线上的所有设备的工具. 为了能使用这个命令所有功能, ...
- 解密Qt安装目录的结构
http://c.biancheng.net/view/3866.html 了解 Qt 安装目录的结构虽然不是编程必须的,但是它能练就我们的内功,让我们对 Qt 的编程环境了如指掌.Windows 和 ...
- CentOS6.4运维知识点1
系统的基础优化 1. 修改yum源(CentOS6.4 Mini) wget http://mirrors.163.com/.help/CentOS6-Base-163.repo cd /etc/yu ...
- Flask 框架app = Flask(__name__) 解析
#!/usr/local/bin/python # coding=utf-8 from flask import Flask app = Flask(__name__) @app.route('/') ...