效果

源码

<!doctype html>

<html class="outline color">

<head>

    <meta charset="utf-8">

    <title>图片scale动画</title>

    <style>

        .img-box {

            position: relative;

            width: 740px;

            height: 420px;

            overflow: hidden;

        }

        /* 彩色图片缩放动画 */

        .img-box>.image-scale {

            position: absolute;

            width: 900px;

            height: 580px;

            top: -80px;

            left: -80px;

            background-size: cover;

            transition: all 0.5s ease-in-out;

        }

        .img-box:hover>.image-scale {

            transform: scale(0.822);

        }

    </style>

</head>

<body>

    <div class="img-box">

        <div class="image-scale" style="background-image: url(./images/1.jpg);"></div>

    </div>

</body>

</html>

img-box: 装图片的盒子,确保子元素超出部分隐藏起来.

image-scale: 绝对定位,并手动设置图片居中.

素材

[CSS] Scale on Hover with Transition的更多相关文章

  1. css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层，正常是 里外层 鼠标上来 外层有hover，如果就想到里层hover触发外层hover，要用外层position 定义绝对定位，内层的hover跳出外层的div，这样视觉上就是两个单独的div，进行内外层联动。

    css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...

  2. 在css中使用hover来控制其他元素的样式，该两个元素必须是父子元素

    .col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!

  3. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  4. CSS动画：animation、transition、transform、translate

    https://blog.csdn.net/px01ih8/article/details/80780470 一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画). ...

  5. 402 CSS菜鸟：transform and transition

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. css中的transform，transition，translate的关系

    transform 旋转(transform是没有动画效果,你改变了它的值,元素的样子就唰的改变了.其中的位移的函数名就叫translate,所以说,translate是transform的一部分.) ...

  7. 两种纯CSS方式实现hover图片pop-out弹出效果

    实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...

  8. CSS 3D旋转 hover 后设置transform 是相对于正常位置

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

  9. css中关于transform、transition、animate的区别

    写动画经常会用到这几个属性,他们之间有什么区别呢? 1.transform 每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画 ...

随机推荐

  1. Kali学习笔记14：SMB扫描、SMTP扫描

    SMB(Server Message Block)协议,服务消息块协议. 最开始是用于微软的一种消息传输协议,因为颇受欢迎,现在已经成为跨平台的一种消息传输协议. 同时也是微软历史上出现安全问题最多的 ...

  2. Spark面试题

    RDD怎么理解? RDD 是 Spark 的灵魂,也称为弹性分布式数据集.一个 RDD 代表一个可以被分区的只读数据集.RDD 内部可以有许多分区(partitions),每个分区又拥有大量的记录(r ...

  3. strace命令用法

    -tt 在每行输出的前面,显示毫秒级别的时间 -T 显示每次系统调用所花费的时间 -v 对于某些相关调用,把完整的环境变量,文件stat结构等打出来. -f 跟踪目标进程,以及目标进程创建的所有子进程 ...

  4. mysql 开发进阶篇系列 5 SQL 优化(表优化)

    一. 使用sql提示 sql 提示(sql hint)是优化数据库的一个重要手段, 是在sql语句中加入一些人为的提示来达到优化操作的目的. 1.1 use index 在查询语句中表名的后面,添加u ...

  5. [java核心外篇]__Object类与对象类型的转型

    前言 我们在之前的学习中提过很多次了,java是面向对象的,java的基础可以说是建立在类和对象上面的.然后我们又学到了类的继承,发现了在java类库中,类的继承是极为普遍的,一个类继承另一个类,就像 ...

  6. 发福利了！！超过100本的linux免费书籍

    New Books Kindle Fire App Development Essentials iPhone iOS 6 Development Essentials CentOS 6 Essent ...

  7. iOS逆向开发（1）：基础工具 | ssh | scp | socat

    小白:小程,我一直想问,什么是逆向来着?是逆向行驶吗? 小程:理解为逆向行驶也没错.一般的项目是从无到有,而逆向是从已有的状态入手,分析出已有的流程与结构的手段. iOS上的逆向开发,是一件有趣的事情 ...

  8. leetcode — sqrtx

    /** * Source : https://oj.leetcode.com/problems/sqrtx/ * * * Implement int sqrt(int x). * * Compute ...

  9. leetcode — rotate-list

    /** * Source : https://oj.leetcode.com/problems/rotate-list/ * * * Given a list, rotate the list to ...

  10. easyui combobox 设置滚动条

    设置滚动条: 1 panelHeight:200  :设置固定的高度. 2 panelHeight:'auto', panelMaxHeight:200. <input class=" ...