[CSS3] Apply Image Filter Effects With CSS

2020-12-20 21:35:15 阅读：195 来源： 互联网

标签：CSS3 box hover span Image effect Filter inset shadow

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);
}

标签：CSS3,box,hover,span,Image,effect,Filter,inset,shadow
来源： https://www.cnblogs.com/Answer1215/p/14165318.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

[CSS3] Apply Image Filter Effects With CSS