效果

源码

<!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学习笔记20：缓冲区溢出实验环境准备

    在前几篇的博客中:我介绍了OpenVAS和Nessus这两个强大的自动化漏洞扫描器 但是,在计算机领域中有种叫做0day漏洞:没有公开只掌握在某些人手中 那么,这些0day漏洞是如何被发现的呢? 接下 ...

  2. Redis数据结构以及应用场景

    1. Redis数据结构以及应用场景 1.1. Memcache VS Redis 1.1.1. 选Memcache理由 系统业务以KV的缓存为主,数据量.并发业务量大,memcache较为合适 me ...

  3. pycharm删除project

    1 在pycharm里面选择关闭project 2 返回到这个页面,然后点×让project不在project列表显示(最好记住project的位置) 3 到源文件夹删除这个project文件夹 大功 ...

  4. Oracle报错#“ORA-01791: 不是 SELECTed 表达式”解决方法

    今天遇到一个Oracle报错,写篇博客记录一下 简单看一下下面这个sql,这也查询是没报错的 select a.area_seq, a.area_name from t_unit_area a WHE ...

  5. 工作随笔—Elasticsearch大量数据提交优化

    问题:当有大量数据提交到Elasticsearch时,怎么优化处理效率? 回答: 批量提交 当有大量数据提交的时候,建议采用批量提交. 比如在做 ELK 过程中 ,Logstash indexer 提 ...

  6. python(leetcode)-283移动零

    给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 示例: 输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 说明: 必须在原数组上操作, ...

  7. js数组之sort排序的用法

    sort排序 转载自:https://blog.csdn.net/idomyway/article/details/80544509 js中用方法sort()为数组排序.sort()方法有一个可选参数 ...

  8. 整理+学习《骆昊-Java面试题全集（上）》

    ★可以关注微信公众号,了解更多技术和行业信息 2013年年底的时候,我看到了网上流传的一个叫做<Java面试题大全>的东西,认真的阅读了以后发现里面的很多题目是重复且没有价值的题目,还有不 ...

  9. Docker Ubuntu中安装ping ifconfig命令

    Ubuntu 容器环境安装ping ifconfig 进入容器执行:ifconfig ping 没有该命令 apt-get update ###命令 ifconfig apt-get install ...

  10. Spring框架(2)---IOC装配Bean(xml配置方式)

    IOC装配Bean (1)Spring框架Bean实例化的方式提供了三种方式实例化Bean 构造方法实例化(默认无参数,用的最多) 静态工厂实例化 实例工厂实例化 下面先写这三种方法的applicat ...