欢迎光临
我们一直在努力

纯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) 打赏
微信公众号
 
未经允许不得转载:珊瑚贝 » 纯css实现图片放大
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏