鼠标悬浮图片放大

最新推荐文章于 2021-06-07 11:22:16 发布

dejing6575

最新推荐文章于 2021-06-07 11:22:16 发布

阅读量428

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/weiyinfu/p/9124092.html

版权

1、要给图片加上一个边框，这样图片放大的时候就不会挤压其它元素，并且

边框overflow=hidden，超出了就隐藏
图片放大的时候zIndex要足够大，这样就不会被其他元素遮挡

2、使用hover伪类

可以使用transform=scale(1.2)表示放大
可以使用transition-duration属性添加渐变效果

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>中心点逐渐放大效果</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .content {
            margin: 40px auto;
            width: 450px;
            height: 301px;
            border:10px solid #808080;
            overflow:hidden;
            z-index:2;
        }
        .content img {
            width: 450px;
            height: 301px;
            transition-duration:0.5s;
            z-index:1;
        }
        .content img:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.2); /*Safari 和 Chrome*/
            -moz-transform: scale(1.2); /*Firefox*/
            -ms-transform: scale(1.2); /*IE9*/
            -o-transform: scale(1.2); /*Opera*/
        }
    </style>
</head>
<body>
    <div class="content">
        <img src="img/5.jpg" class="pic"/>
    </div>
</body>
</html>

参考资料

https://www.cnblogs.com/xuyuntao/p/4965818.html

转载于:https://www.cnblogs.com/weiyinfu/p/9124092.html

dejing6575

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬浮图片放大

1、要给图片加上一个边框，这样图片放大的时候就不会挤压其它元素，并且边框overflow=hidden，超出了就隐藏图片放大的时候zIndex要足够大，这样就不会被其他元素遮挡2、使用hover伪类可以使用transform=scale(1.2)表示放大可以使用transition-duration属性添加渐变效果<!DOCTYPE html><h...
复制链接

扫一扫