如何使用JavaScript在HTML页面实现图片的多种hover动画？

下面给你几个简单易上手的图片hover动画实现，都是纯JS+CSS配合的方案，直接就能用：

1. 图片缩放动画 #

这是最常用的hover效果，鼠标悬停时图片放大，移出时恢复：

<img src="你的图片路径.jpg" class="hover-img" alt="示例图片">

<script>
const hoverImgs = document.querySelectorAll('.hover-img');

hoverImgs.forEach(img => {
  // 鼠标进入时放大
  img.addEventListener('mouseenter', () => {
    img.style.transform = 'scale(1.1)';
  });
  
  // 鼠标离开时恢复
  img.addEventListener('mouseleave', () => {
    img.style.transform = 'scale(1)';
  });
});
</script>

<style>
.hover-img {
  width: 300px;
  height: auto;
  cursor: pointer;
  /* 提前设置过渡，让动画更平滑 */
  transition: transform 0.3s ease;
}
</style>

2. 悬停显示文字叠加层 #

鼠标放上去时，图片上弹出半透明背景的文字说明：

<div class="img-container">
  <img src="你的图片路径.jpg" alt="示例图片">
  <div class="img-overlay">这是图片的说明文字</div>
</div>

<script>
const containers = document.querySelectorAll('.img-container');

containers.forEach(container => {
  const overlay = container.querySelector('.img-overlay');
  
  container.addEventListener('mouseenter', () => {
    overlay.style.opacity = '1';
  });
  
  container.addEventListener('mouseleave', () => {
    overlay.style.opacity = '0';
  });
});
</script>

<style>
.img-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
</style>

3. 位移+阴影增强立体感 #

鼠标悬停时图片轻微上移，同时添加阴影，模拟浮起效果：

<img src="你的图片路径.jpg" class="lift-img" alt="示例图片">

<script>
const liftImgs = document.querySelectorAll('.lift-img');

liftImgs.forEach(img => {
  img.addEventListener('mouseenter', () => {
    img.style.transform = 'translateY(-10px)';
    img.style.boxShadow = '0 10px 20px rgba(0,0,0,0.2)';
  });
  
  img.addEventListener('mouseleave', () => {
    img.style.transform = 'translateY(0)';
    img.style.boxShadow = 'none';
  });
});
</script>

<style>
.lift-img {
  width: 300px;
  height: auto;
  cursor: pointer;
  transition: all 0.3s ease;
}
</style>

小提示 #

• 把过渡效果写在CSS里比写在JS里更高效，避免每次事件触发都重复设置transition
• 如果要批量给多个图片加效果，用querySelectorAll批量选择元素，再用forEach循环绑定事件就好

内容的提问来源于stack exchange，提问作者Coder_SPS