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

原创 新起点博客  2020-05-21 13:25 
【上云必备】上云仅?102/年

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>

 

本文地址:https://www.henenseo.com/archives/1968
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情