[CSS] Scale on Hover with Transition

时间：2022-09-23 11:49:12

效果

[CSS] Scale on Hover with Transition

源码

<!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>

[CSS] Scale on Hover with Transition

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

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

素材

[CSS] Scale on Hover with Transition

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

  1. css hover 动画 transition&colon;background-color 0&period;2s&comma;color 0&period;2s&semi; 外层套内层，正常是 里外层 鼠标上来 外层有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过渡放在&colon;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. ASP&period;NET MVC5&plus;EF6&plus;EasyUI 后台管理系统（55）-Web打印

    系列目录 前言 1.本次主要弥补工作流,用户表单数据的打印 2.使用JQprint做为web打印插件 3.兼容:FireFox,Chrome,IE. 4.没有依赖也没有配置,使用简单 代码下载:htt ...

  2. vuejs的使用方法

    1.安装webpack打包工具 npm install -g webpack 2.安装vue客户端 npm install -g vue-cli 3.初始化项目 vue init webpack de ...

  3. WordPress建站 新手入门

    WordPress建站 新手入门教程系列 1. WordPress入门 之 什么是WordPress? 2. WordPress入门 之 搭建WordPress站点需要什么条件? 3. WordPre ...

  4. IO流&lpar;四&rpar;&lowbar;&lowbar;流的操作规律总结

    流的操作规律: 1.明确源和目的 源:InputStream Reader 目的:OutputStream Writer 2.明确数据是否是纯文本数据 源:是纯文本:Reader 否:InputStr ...

  5. error：no such partition grub rescue

    重新安装了ubuntu12.04后,Ubuntu开机就出现:error:no such partitiongrub rescue >一般情况下,出现这类错误是引导文件出错或者系统找不到引导文件, ...

  6. hdu 3054 Fibonacci 找循环节的公式题

    Fibonacci Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) Proble ...

  7. 通过ftp模拟网盘

    package com.xiaomo.ftp.down_upload; import java.io.IOException; import java.util.ArrayList; import j ...

  8. 3D 服务器端以向量计算为主的角色位置的算法

    把我以前学习过的一个东西拿出来分享下~ 3D服务器端玩家行走处理是服务器端根据客户端行走路径.玩家行走时间以及速度(包括变化速度)计算得出玩家的当前位置. 由于客户端行走是一条路径,不使用2D中的格子 ...

  9. Derek解读Bytom源码-持久化存储LevelDB

    作者:Derek 简介 Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom ...

  10. Lua 迭代器与closure

    所谓“迭代器”就是一种可以遍历(iterate over)一种极和中所有元素的机制.在Lua中,通常将迭代其表示为函数.每调用一次函数,即返回集合中的“下一个”元素.每个迭代器都需要在每次成功调用之间 ...

相关文章