鼠标经过时图片放大

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标经过时图片放大相关的知识,希望对你有一定的参考价值。

html:

<div>

  <img src="引用图片.png">

</div>

 

CSS:

div img{

  width:160px;

  height:120px;

  -webkit-transition:-webkit-transform 1s ease 0s;

  transition:transform 1s ease 0s;

  -webkit-transform-origin:center;

  transform-origin:center;

}

div img:hover{

  -webkit-transform: scale(1.2);

  transform: scale(1.2);

}

 

当鼠标放到图片上时,图片会放大。

完整Demo:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
  div img{
  width: 160px;
  height: 120px;
  -webkit-transform: -webkit-transform 1s ease 0s;
  transition:transform 1s ease 0s;
  -webkit-transform-origin:center;

}
div img:hover{
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
div{
  text-align: center;
}
</style>
</head>
<body>

<div>
  <img src="/i/eg_mouse.jpg"/>
</div>

</body>
</html>

以上是关于鼠标经过时图片放大的主要内容,如果未能解决你的问题,请参考以下文章

angular js 鼠标移过图片放大,就是放在图片上图片放大 或者反击,

js图片滚动鼠标移上去放大

如何用CSS实现鼠标经过 图片放大的效果

鼠标经过,图片放大事件

VB中如何实现图片自动缩放

js+css鼠标移动图片放大