[分享]css3悬停放大图片两边模糊

CSS3的众多特性给网页设计师和开发者带来便利。其中，悬停放大图片、两边模糊的特性可以使网站界面更生动有趣。本文将介绍如何使用CSS3实现这一效果。首先，我们需要一个图片容器。可以使用HTML的img...

CSS3的众多特性给网页设计师和开发者带来便利。其中，悬停放大图片、两边模糊的特性可以使网站界面更生动有趣。本文将介绍如何使用CSS3实现这一效果。

首先，我们需要一个图片容器。可以使用HTML的img标签，也可以使用背景图片来实现。这里我们使用HTML的img标签：

<div class="wrapper">
  <img src="img.jpg" alt="图片">
</div> 

接着，我们需要用CSS来定义wrapper类：

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

.wrapper img {
  transition: all 0.5s ease-in-out;
}

.wrapper:hover img {
  transform: scale(1.2);
  filter: blur(5px);
} 

解析代码：

• position: relative;设置容器的相对位置，以便子元素可以在其中定位。
• display: inline-block; 使容器在父元素中按照块元素排列，并且只占用实际内容的宽度。
• overflow: hidden; 切断内容超出容器的部分。
• transition: all 0.5s ease-in-out; 使图片放大时有流畅的过渡效果。
• transform: scale(1.2); 悬停时，将图片放大1.2倍。
• filter: blur(5px); 悬停时，将图片模糊5像素。

整体效果就是鼠标悬停图片时，图片会放大并模糊，类似于一个镜头放大焦距的效果。这种效果适用于产品介绍和特别推荐等场合，可以吸引用户的注意力，并且增加页面的活力。