效果

源码

<!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. 一个简单的实例演示vuex模块化和命名空间

    因为Vuex Store是全局注册的,不利于较大的项目,引入模块分离业务状态和方法,引入命名空间解决不同模块内(getters,mutaions,actions)名称冲突的问题 ----------- ...

  2. CentOS 7.4 安装 K8S v1.11.0 集群所遇到的问题

    0.引言 最近打算将现有项目的 Docker 部署到阿里云上面,但是之前是单机部署,现在阿里云上面有 3 台机器,所以想做一个 Docker 集群.之前考虑是用 Docker Swarm 来做这个事情 ...

  3. HashMap源码之常用方法--JDK1.8

    常用方法 hash(key) static final int hash(Object key) { int h; return (key == null) ? 0 : (h = key.hashCo ...

  4. python 备忘

    import jsonu='''{ "maps": [ { "id": "blabla", "iscategorical" ...

  5. centos 7 linux 安装与卸载 jdk 7

    一.声明 本文采用操作系统版本: Centos 7 Linux 系统 版本源:CentOS-7-x86_64-DVD-1708.iso 官网下载地址:http://isoredirect.centos ...

  6. kubernetes之收集集群的events，监控集群行为

    一.概述 线上部署的k8s已经扛过了双11的洗礼,期间先是通过对网络和监控的优化顺利度过了双11并且表现良好.先简单介绍一下我们kubernetes的使用方式: 物理机系统:Ubuntu-16.04( ...

  7. MyBatis源码解析（六）——DataSource数据源模块之池型数据源

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6675674.html 1 回顾 上一文中解读了MyBatis中非池型数据源的源码,非池型也 ...

  8. Python获得百度统计API的数据并发送邮件

    Python获得百度统计API的数据并发送邮件 小工具  本来这么晚是不准备写博客的,当是想到了那个狗子绝对会在开学的时候跟我逼逼这个事情,所以,还是老老实实地写一下吧.   Baidu统计API的使 ...

  9. Java网络编程的基本网络概念

    前言 自己网络这方面的知识很是薄弱,每次面试被问到这部分都会卡壳,所以很尴尬,然后最近也是有些时间了,就赶紧把自己的不足补充一下.虽然最近也在看设计模式,但是总看设计模式也容易烦,所以就并行学习,看看 ...

  10. python等值和大小比较

    等值.大小比较 在python中,只要两个对象的类型相同,且它们是内置类型(字典除外),那么这两个对象就能进行比较.关键词:内置类型.同类型.所以,两个对象如果类型不同,就没法比较,比如数值类型的数值 ...