图片悬停效果

图片悬停效果是通过使用CSS的hover选择器和transform属性实现的。当鼠标悬停在图片上时，悬停选择器将触发图片的transform属性，从而实现图片的旋转、缩放或移动等效果。

以下是一个实现图片悬停效果的示例代码：

<div class="img-container">
  <img src="image.jpg" alt="">
  <div class="overlay">
    <div class="overlay-content">
      图片悬停效果
    </div>
  </div>
</div>

在该示例代码中，img元素是用来显示图片的，overlay元素是用来覆盖在图片上的半透明遮罩，overlay-content元素是用来在遮罩上显示文字内容的。

当鼠标悬停在图片上时，hover选择器将触发overlay元素的opacity属性，从而使遮罩的透明度从0变为1，从而显示出遮罩上的文字内容。

此外，还可以使用transform属性来实现图片的旋转、缩放或移动等效果。例如，以下代码可以实现图片在鼠标悬停时旋转90度：

.img-container:hover img {
  transform: rotate(90deg);
}

图片悬停效果可以用来实现各种各样的视觉效果，例如，可以用来显示图片的标题、或其他相关信息，也可以用来实现图片的放大或缩小效果。