zoukankan      html  css  js  c++  java
  • [CSS3] Apply Image Filter Effects With CSS

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

  • 相关阅读:
    ZOJ Bookcase
    C*++ Calculations
    STL <cctype>
    线段树单点更新+区间更新
    ZOJ Supermarket
    STL <cassert>
    算法导论<二>
    MV Maker [DP]
    LIS 最长有序子序列(递增/递减/非递增/非递减)
    LIS
  • 原文地址:https://www.cnblogs.com/Answer1215/p/14165318.html
Copyright © 2011-2022 走看看