纯css实现图片放大

最新推荐文章于 2024-01-27 20:29:14 发布

珊瑚贝

最新推荐文章于 2024-01-27 20:29:14 发布

阅读量157

点赞数

文章标签： css 前端 html javascript css3

本文链接：https://blog.csdn.net/chenzhao635/article/details/128080408

版权

图片鼠标指向时放大功能，便于产品展示，可以通过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;
	}