提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[CSS3] Apply Image Filter Effects With CSS

css3CSS with filter Image apply Effects
2023-09-14 08:59:13 时间

Apply a grayscale and blurred effect on an image without the use of graphics software by using the CSS filter property. Additionally, use an inset box-shadow to create a vignette effect as used by photographers. Learn how to remove each effect by using transition to ease out the effects on a :hover interaction.

 

<body>
    <span>
      <img
        src="https://obamawhitehouse.archives.gov/sites/default/files/women-in-stem/ada-lovelace.jpg"
        alt="Ada Lovelace"
      />
    </span>
  </body>
span {
  position: relative;
}

span::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 5rem rgba(7, 16, 48, 0.8);
  transition: 180ms box-shadow;
}

span:hover img {
  filter: none;
}

span:hover::after {
  box-shadow: inset 0 0 0 rgba(7, 16, 48, 0.8);
}

 

 

相关文章