Html5中鼠标经过图片，图片在盒子内部实现放大效果。

米硕

于 2021-08-24 14:04:30 发布

阅读量2w

点赞数 23

分类专栏：鼠标经过图片放大效果

本文链接：https://blog.csdn.net/mishuo24/article/details/119888045

版权

鼠标经过图片放大效果专栏收录该内容

1 篇文章

订阅专栏

本文讲述了如何通过在图片父元素添加overflow：hidden属性，实现了鼠标经过图片时缩放图片但保持在父盒子内的效果，避免了图片溢出问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先我们先来看一下最终实现的效果：

2. 刚开始的时候我并没有实现这个效果，遇到的问题就是鼠标经过图片时，图片可以放大，但是图片会超出父盒子，不是在父盒子里面进行的放大，效果图如下：

3.这个问题如何解决呢，其实很简单只需要在这个图片的父元素里添加 overflow：hidden;这个隐藏属性就ok了，这样当你图片发大时超出父盒子的部分会被隐藏掉，代码如下：

<style>
        body {
            background-color: pink;
        }

        div {
            overflow: hidden;
            width: 180px;
            height: 130px;
            margin: 50px auto;
            border: 2px solid red;
        }

        img:hover {
            animation: move .5s linear forwards;
        }

        @keyframes move {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(1.1);
            }
        }
    </style>
</head>

<body>
    <div>
        <img src="../image/picture.jpg" alt="" width="180px" height="130px">
    </div>
</body>