[分享]css中hover悬浮图片

CSS中的hover悬浮效果可以让我们在鼠标悬停在图片上时展示各种效果，例如图片的颜色、透明度，鼠标悬浮在图片上时的样式等等。下面是一个简单的例子，在这个例子中当鼠标悬浮在图片上时图片会变为黑白： i...

CSS中的hover悬浮效果可以让我们在鼠标悬停在图片上时展示各种效果，例如图片的颜色、透明度，鼠标悬浮在图片上时的样式等等。

下面是一个简单的例子，在这个例子中当鼠标悬浮在图片上时图片会变为黑白：

 img:hover {
      filter: grayscale(100%);
    } 

在这段代码中，我们使用了CSS3的filter属性来改变图片的颜色。filter属性是一个非常强大的属性，可以让我们在CSS中进行各种图像处理操作（例如颜色转换、模糊等等）

除了可以改变图片的颜色以外，我们还可以使用CSS中的伪元素来创建一些炫酷的悬浮效果。下面是一个创建出方框边框的例子：

 img:hover:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      border: 3px solid #fff;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
    } 

在这段代码中我们使用了伪元素:before来创建出一个方框，然后使用CSS来定义边框的宽度、颜色等等。我们还使用了定位属性(position)来让这个元素位于图片的上方，并且使用box-sizing属性来定义这个元素的大小应该包括边框。

总结一下，CSS中的hover悬浮效果可以让我们在鼠标悬停在图片上时展示各种效果，例如图片的颜色、透明度，鼠标悬浮在图片上时的样式等等。我们可以使用CSS3中的filter属性来改变图片的颜色，使用伪元素来创建一些炫酷的悬浮效果。