鼠标hover时改变图片透明度和颜色（方法二）

方法二：使用CSS的:hover伪类和transition属性来实现鼠标hover时改变图片透明度和颜色。

HTML代码：

<div class="image-wrapper">
  <img src="image.jpg" alt="Image">
  <div class="overlay"></div>
</div>

CSS代码：

.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.5s ease-in-out;
}

.image-wrapper:hover img {
  opacity: 0.8;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.image-wrapper:hover .overlay {
  opacity: 0.5;
}

解释：
- .image-wrapper是一个包含图片和遮罩层的容器，遮罩层用来实现改变颜色的效果。
- .image-wrapper img的transition属性用来实现图片透明度变化的平滑过渡。
- .image-wrapper:hover img的opacity属性设置为0.8，使鼠标hover时图片透明度降低。
- .overlay是一个绝对定位的遮罩层，初始时opacity为0，鼠标hover时opacity为0.5，使颜色变暗。
- .image-wrapper:hover .overlay选择器用来设置鼠标hover时遮罩层的opacity为0.5。

效果预览：