CSS 实现鼠标移动到图片上图片变大，不改变盒子大小

最新推荐文章于 2024-05-23 10:56:36 发布

发呆的薇薇°

最新推荐文章于 2024-05-23 10:56:36 发布

阅读量4.3k

点赞数 5

分类专栏： css 文章标签： css css3 前端 html

本文链接：https://blog.csdn.net/Shivy_/article/details/129306134

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

介绍

实现鼠标经过图片时，图片等比放大，但是图片的父盒子不会改变；主要使用了css的动画来实现。

实现效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    height: 400px;
    width: 400px;
    border: 10px solid red;
    margin: 100px auto;
    /* 设置overflow: hidden 当放大的时候超出部分隐藏 */
    overflow: hidden;
  }
  .box img {
    display: inline-block;
    height: 100%;
    width: 100%;
    cursor: pointer;
    transition: all .6s;
  }
  .box img:hover {
    transform: scale(1.2);
  }
</style>
<body>
  <div class="box">
    <img src="./images.jpg" alt="">
  </div>
</body>
</html>