鼠标悬停时图片放大_css3实例

最新推荐文章于 2025-09-10 15:50:11 发布

转载最新推荐文章于 2025-09-10 15:50:11 发布 · 3.2w 阅读

137

前端开发专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的鼠标悬停图片自动放大效果。通过设置div的溢出隐藏和图片的过渡效果，当鼠标移至图片上时，图片将平滑放大到原来的1.4倍。

鼠标移到图片上时，图片会自动放大

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
  width: 200px;
  height: 138px;
  border: #000 solid 1px;
  margin: 50px auto;
  overflow: hidden;
}
#div1 img{
  cursor: pointer;
  transition: all 0.6s;
}
#div1 img:hover{
  transform: scale(1.4);
}
</style>
</head>
<body>
<div id="div1">
  <img src="demo.jpg" />
</div>
</body>
</html>