缩放:transform:scale(倍数);

实现hover的时候加载播放图标,具体效果如下:

首先需要创建一个大盒子,盒子上面部分用一个div来呈放图片,下面部分直接书写文字。观察发现播放图标是存在于上部图片的居中位置,所以可以考虑在上面部分加上after伪元素然后通过定位的方式居中在图片的中间,并且默认情况下这个图标是放大效果,同时是不可见的(设置起不可见可以考虑为display:none或者opacity:0),当整个大div被hover的时候才会缩放到原图也就是transform:scale(1),并且设置其可见(display:inline-block or opacity:1 )。代码如下:

1      <div class="box">
2 <div>
3 <img src="../images/bg.jpg" alt="">
4 </div>
5 <p>【和平精英】“初火”音乐概念片:四圣觉醒......</p>
6 </div>
 1     .box {
2 margin: 100px auto;
3 width: 249px;
4 height: 210px;
5 overflow: hidden;
6 }
7
8 .box img {
9
10 width: 100%;
11 }
12
13 .box div {
14 position: relative;
15 }
16
17 .box div::after {
18 position: absolute;
19 top: 50%;
20 left: 50%;
21 content: '';
22 width: 58px;
23 height: 58px;
24 opacity: 0;
25 background-image: url(../images/play.png);
26 transform: translate(-50%, -50%) scale(6);
27 transition: all .5s;
28 }
29
30 .box:hover.box div::after{
31 opacity: 1;
32 transform:translate(-50%, -50%) scale(1);
33 }

CSS3-transform缩放的更多相关文章

  1. css3 transform:scale(x)实现字体的缩放:

    css3 transform:scale(x)字体的缩放: transform:scale(x),针对于整体的缩放,缩放的整体包括宽,高,背景.这自然对于内联元素就无法使用此属性,最好使用无属性的sp ...

  2. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  3. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  4. CSS3 transform 属性

    CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

  5. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  6. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  7. CSS3 transform变换

    CSS3 transform变换 1.translate(x,y) 设置盒子位移2.scale(x,y) 设置盒子缩放3.rotate(deg) 设置盒子旋转4.skew(x-angle,y-angl ...

  8. css3 transform中的matrix矩阵

    CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...

  9. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...

  10. CSS3 transform rotate(旋转)锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

随机推荐

  1. Building fresh packages卡很久

    [NPM]Building fresh packages运行很久都没反应原创onemetre 最后发布于2019-12-24 10:20:13 阅读数 287 收藏展开[问题]通过YARN 安装,Bu ...

  2. OS-lab5

    OS-lab5 磁盘管理 完成文件系统的第一步就是要能够处理磁盘等外设的信息. lib/syscall_all.c 处理磁盘的信息,最基本的就是对磁盘进行读写操作. sys_write_dev函数用于 ...

  3. 使用pyspark 建立spark 的累加器

    一,累加器特征 1,PySpark累加器是一个共享变量,与RDD和DataFrame一起使用,以执行与Map reduce计数器类似的求和和和计数器操作. 2,只有分布在各个节点上的task任务才能更 ...

  4. 遇到bug怎么分析,这篇文章值得一看

    博主总结的非常到位:https://mp.weixin.qq.com/s/UpaLWjix2tnfTqybx9dmoQ 为什么定位问题如此重要? 可以明确一个问题是不是真的"bug" ...

  5. linux查找服务位置

  6. vue高级进阶( 一 ) 组件精髓概述

    前言 这个系列可能会分为几部分: 基础以及高级用法总结 一些比较有代表性的实战 源码解析(一定是用最粗俗,不对,是最通俗的语言讲解,这个我可以保证) 总之一定对得起高级进阶这几个字... 组件分类 v ...

  7. alpine镜像安装sshd以进行远程debug

    FROM alpine:latest RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories ...

  8. 必备技能,MySQL 查找并删除重复行

    本文讲述如何查找数据库里重复的行.这是初学者十分普遍遇到的问题.方法也很简单.这个问题还可以有其他演变,例如,如何查找"两字段重复的行"(#mysql IRC 频道问到的问题) 如 ...

  9. java和js 用正则表达式切割省市县的代码

    String s= "安徽省合肥市肥西县上派镇"; // String regex="(\\?[^省]+自治区|.*?省|.*?行政区|.*?市)(\\?[^市]+自治州 ...

  10. tomcat8 无法解析 请求url 中 包含 [: 或者 :] 等特殊符号

    使用如下URL: http://127.0.0.1:8080/xx/[:xOGxeSSk5ENaYh89ziEFJA==:].do 如果使用tomcat8 无法正常访问,浏览器network 报错 4 ...