CSS3实现鼠标移入图片,图片放大缩小

废话不多说直接上代码,如下:
css代码:

.tc>div>ul>li>img{
    display: inline-block;
    vertical-align: top;
    width: 295px;
    height: auto;
    margin: 0 20px 18px 0;
    background: white;
    box-sizing: border-box;
    transition: all .5s;
    -webkit-transition: all .5s; /* Safari */
}
.tc>div>ul>li>img:hover {
    cursor: pointer;
    transform: scale(1.1);
    -ms-transform:scale(1.1);     /* IE 9 */
    -moz-transform:scale(1.1);     /* Firefox */
    -webkit-transform:scale(1.1); /* Safari 和 Chrome */
    -o-transform:scale(1.1);
}

html代码:

   <div class="tc mld">
        <h5><span>辅导班</span><small></small></h5>
        <div>
            <ul>
                <li onclick="window.open('video.html')">
                   <img src="image/1.jpg">
                </li>
            </ul>
        </div>
发布了61 篇原创文章 · 获赞 11 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/dmguying/article/details/103363796