这是一个圆形边框做的效果

HTML

CSS

.circle-wrapper,.circle-wrapper img {  display: inline-block;  width: 50px;  height: 50px;  border-radius: 50%;  -webkit-transition: .3s;  transition: .3s;}.circle-wrapper {  border: 1px solid #ddd;  position: relative;  overflow: hidden;}.circle-wrapper img {  position: absolute;}.circle-wrapper img:hover {  -webkit-transform: scale(2);  transform: scale(2);}

自己做的案例：

HTML

     
    
              
      
            
       
                
        
                
         WORKS/案例                
        
                
        
                                                      
         所有                                                    
         VI                                                    
         包装                                                    
         画册                                                       
         工程                                                   
         广告                                       
        
            
       
                        
       
                
        
                    
         
                                           
                              
         
                    
         
                        
                              
         
                    
         
                        
                              
         
                    
         
                        
                              
         
                
        
                
        
                    
         
                       
                               
         
                    
         
                       
                              
         
                    
         
                       
                               
         
                    
         
                        
                              
         
                
        
                
        
                    
         
                        
                              
         
                    
         
                        
                              
         
                    
         
                        
                              
         
                    
         
                        
                              
         
                
        
           
       
        
      
     

CSS

/*案例 开始*/#cases{    clear:both;    position:relative;    width:100%;    height:800px;    padding:40px 0px;        }#al-list{    width:80%;    margin-left:10%;    position:relative;        height:30px;}.al-items{    float:left;    position:relative;    width:75%;    height:30px;        }    .al-right{    float:left;    position:relative;    margin-right:0px;    width:25%;    height:30px;        }.a-item{    margin-left:10px;    margin-right:10px;        }                    .al{    position:relative;    padding:30px 0}.anli{    width:80%;    position:relative;    margin-left:10%;    margin-top:20px;    height:200px;}.four-anli,.four-anli img{    display:inline-block;        height:200px;    -webkit-transition: .3s;      transition: .3s;    }.four-anli{    width:23%;    position:relative;    float:left;    margin-left:2%;    border:1px solid #000;    right:1%;    overflow:hidden;    }.four-anli img{    width:100%;    position:absolute;   }.four-anli img:hover{    -webkit-transform: scale(2);      transform: scale(2);  }   /*案例 结束*/

效果：

　　初始效果

　　鼠标移动上的效果

发现第二张图片有变化了吗