纯css实现图片放大

图片 鼠标指向时放大功能,便于产品展示,可以通过Js,jquery来实现,但最好的方法还是纯css来实现,下面的代码轻松实现了这一功能。

1、html结构

<ul>
  <li><a  href=""><img scr="/images/1.jpg"></a></li>
  <li><a  href=""><img scr="/images/2.jpg"></a></li>
  <li><a  href=""><img scr="/images/3.jpg"></a></li>
  <li><a> href=""<img scr="/images/4.jpg"></a></li>

2、Css

img{
      display: block;  
      width:100%;   
      transform: scale(1);  
      transition: all 1s ease 0s;  
      -webkit-transform: scale(1);  
      -webkit-transform: all 1s ease 0s; 
      -webkit-transform-origin:50% 50%; 
      transform-origin:50% 50%;
      overflow:hidden;
     }
a:hover img{
	transform: scale(1.3);  
        transition: all 1s ease 0s;  
        -webkit-transform: all 1s ease 0s;  
        -webkit-transform: scale(1.3); /*放大1.3倍*/
	transition-duration: .5s;
	overflow:hidden;
	}
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?