css3鼠标经过，图片放大效果_划过许多li图片放大,不会高度坍塌-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_31648761/article/details/53666085

本文介绍了一种使用CSS实现的图片悬停放大效果。通过设置过渡效果和变换属性，当鼠标悬停在图片上时，图片会平滑地放大到指定的比例。此效果适用于网页中的商品展示或其他需要增强用户体验的场景。

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

css代码

/*图片划过改变图片大小效果*/
.list ul li { width: 228px; height: 270px; overflow: hidden; z-index: 1; position:relative;}
.list ul li a {}
.list ul li a img { width: 228px; height: 270px; position: relative; -webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease; display: block;}
.list ul li a .figcaption:before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255,255,255,0.5);content: '';-webkit-transition: -webkit-transform 0.6s;transition: transform 0.6s;-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0);}
.list ul li a:hover img { transform: scale(1.5, 1.5);  -webkit-transform: scale3d(1.5,1.5); transition: .8s transform; -webkit-transition: .8s transform;}
.list ul li a:hover .figcaption:before{-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0); }
/*结束*/

html代码–

<div class="list">
    <ul>
            <li>
                <a href="" title="【荣华翡翠】2016.12.13新品翡翠">
                    <img src="./image/shop.png" alt="">
                    <p>【荣华翡翠】2016.12.13新品翡翠</p>
                </a>

            </li>
    </ul>
</div>