css实现在鼠标放上去时图片从中心位置变大

最新推荐文章于 2024-01-27 20:29:14 发布

qijingpei

最新推荐文章于 2024-01-27 20:29:14 发布

阅读量1w

点赞数 5

分类专栏：前端框架文章标签： css hover

前端框架专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用CSS实现的特殊效果：当鼠标悬停在图片上方时，图片会从中心位置放大，而非传统的左上角。通过transform属性配合scale函数完成此效果，并设置了平滑过渡。

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

源自：https://stackoverflow.com/questions/28726430/css-how-to-scale-an-image-from-the-center-instead-of-top-left

实现：鼠标放到图片上时，图片从中心位置变大，而不是从左上角为原点变大。

img {
    width: 100%; max-width: 100%;
}
div {
    position: absolute; left: 20%; top: 20%;
    width: 250px;
    transition: all 2s ease-in-out;//这里表示动画的时间为2s
}
div:hover {//hover表示鼠标移动到上面时，触发这个事件
    transform: scale(2,2);//transform表示变换，scale表示范围、大小，这是长宽都变为2倍的实现代码。
}

另一部分代码：

<div>
    <a href="http://photobucket.com/images/cat" target="_blank">
        <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif"/>
    </a>
</div>