HTML5+css3 图片放大效果代码

admin

HTML5+css3 图片放大效果代码
HTML5代码如下：

1. <div class="enlarge">
   
2.     <img src="xx" alt="图片"/>
   
3. </div>  

复制代码

第一种效果超出不隐藏：

1. .enlarge{
   
2.     width: 200px;
   
3.     height: 200px;
   
4.     border: 1px #ffffff solid;
   
5. }
   
6. .enlarge img{
   
7.     width: 100%;
   
8.     height: 100%;
   
9.     cursor: pointer;
   
10.     transition: all 0.6s;
    
11.     -ms-transition: all 0.8s;
    
12. }
    
13. .enlarge img:hover{
    
14.     transform: scale(1.2);
    
15.     -ms-transform: scale(1.2);
    
16. }

复制代码

第二种css3图片放大超出隐藏：

1. .enlarge{
   
2.     width: 200px;
   
3.     height: 200px;
   
4.     overflow: hidden;
   
5.     border: 1px #ffffff solid;
   
6. }
   
7. .enlarge img{
   
8.     width: 100%;
   
9.     height: 100%;
   
10.     cursor: pointer;
    
11.     transition: all 0.6s;
    
12.     -ms-transition: all 0.8s;
    
13. }
    
14. .enlarge img:hover{
    
15.     transform: scale(1.2);
    
16.     -ms-transform: scale(1.2);
    
17. }

复制代码