css如何实现鼠标放在图片上时图片放大呢?


摘要:
下文讲述css代码实现鼠标放在图片上时变大,离开时变小的处理方法分享,如下所示:

实现思路:
     使用css缩放属性transform: scale(1.0,1.0) 既可实现图片变大变小,如下例所示: 

例:

 <meta charset='utf-8' />
<style>
 img{
   width:120px;
   height:30px;
   cursor:hand;
    
   /*
   默认样式
   鼠标移开后
   自动还原
   */
    transform: scale(1.0,1.0);
    -ms-transform:scale(1.0,1.0);
    -moz-transform:scale(1.0,1.0);
    -webkit-transform:scale(1.0,1.0);
    -o-transform:scale(1.0,1.0);
 }

 /*鼠标放上时
 css样式设置 
 */
img:hover{
      transform: scale(2.0,2.0);
      -ms-transform:scale(2.0,2.0);
      -moz-transform:scale(2.0,2.0);
      -webkit-transform:scale(2.0,2.0);
      -o-transform:scale(2.0,2.0);
}
 
</style>
<p>
maomao365.com <br />
鼠标放在图片上时图片变大<br />
鼠标离开图片时图片恢复原大小<br />
的示例分享
</p>
<hr />

<img 
src ="http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png" 
alt ="test" 
 /> 
css实现鼠标放上时图片变大 鼠标移开时图片变小的示例分享

css实现鼠标放上时图片变大
鼠标移开时图片变小的示例分享