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

最新推荐文章于 2024-05-31 21:42:02 发布

米硕

最新推荐文章于 2024-05-31 21:42:02 发布

阅读量1.9w

点赞数 22

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

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

版权

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

1 篇文章 0 订阅

订阅专栏

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>

⭐最后总结一下:实现鼠标经过图片图片放大且不超出父盒子的解决方法就是：在父元素里添加overflow：hidden属性。

米硕

关注

22
点赞
踩
128

收藏

觉得还不错? 一键收藏
4
评论
Html5中鼠标经过图片，图片在盒子内部实现放大效果。

1.首先我们先来看一下最终实现的效果：2. 刚开始的时候我并没有实现这个效果，遇到的问题就是鼠标经过图片时，图片可以放大，但是图片会超出父盒子，不是在父盒子里面进行的放大，效果图如下：3.这个问题如何解决呢，其实很简单只需要在这个图片...
复制链接

扫一扫