鼠标悬停后图片模糊

HTML代码：

<img class="blur-image" src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2023/10/19/094451_202824_0.webp" alt="Your Image">

CSS代码：

<!-------------鼠标悬停图片变模糊---------------->
<style>
.blur-image {
filter: blur(0); /* 初始模糊程度为0 */
transition: filter 0.5s; /* 添加过渡效果 */
}
.blur-image:hover {
filter: blur(10px); /* 鼠标悬停时模糊程度为10px */
}
</style>
<!-------------鼠标悬停图片变模糊---------------->