今天我要来讲一下如何使用CSS来设置悬停图片效果。 首先，在HTML中插入想要添加悬停效果的图片。比如说，我们在一个div中插入一张图片：

<code><div class="image">
<img src="example.jpg" alt="example" />
</div></code>

接下来，我们需要给图片添加CSS样式。例如，我们将图片的宽度设置为200像素，高度自适应：

<code>img {
width: 200px;
height: auto;
}</code>

现在，我们来到关键的一步——添加悬停效果。为了实现这个效果，我们给图片添加一个:hover伪类，表示当鼠标悬停在图片上时，样式应该被应用。 我们可以设置一些不同的样式来改变悬停时图片的外观。比如，在图片上方添加一层半透明的颜色：

<code>img:hover {
filter: brightness(70%);
}
.image:hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}</code>

这里我们设置一个before伪元素，在其中设置背景颜色以及透明度。这个元素会被放置在图片上方，因为我们将它的position设置为absolute。 当鼠标悬停在图片上时，CSS会应用这些样式来创建一个半透明的层并覆盖在图片上方。 总的来说，使用CSS来设置悬停图片效果是非常简单的。只需要给图片添加:hover伪类，然后定义所需的样式即可。无论你想要什么样的效果，CSS都可以帮助你实现。