Example of using CSS filter to write mouse over effect

Use CSS filter to write mouse over effect

<div class="filter-div">
  <img class="filter-img" src="../assets/images/01list.png"/>
</div>
<style>
    .filter-div {
      width: 67px;
      height: 50px;
      background: #fff;
      &:hover {
          background: #5d7aae;
        }
    }
    .filter-img {
      width: 67px;
      height: 50px;
      &:hover {
         filter: brightness(100);
      }
    }
</style>

No Hover before the mouse is placed

After the mouse is placed, there is a Hover

The CSS filter:brightness(100) is used here to apply a linear multiplication to the image, making it appear brighter or darker. If the value is 0% or 0, the image will be completely black. A value of 100% results in no change to the image. Other values ​​correspond to a linear multiplier effect. Values ​​over 100% are possible, and the image will be brighter than before. If no value is set, the default is 1. If you want to dye the image white, the value is 100.

Because the traditional hover method changes the src of img, the image will flash white when it is hovered for the first time, because the image needs to be reloaded. The advantage of this method is that the image only needs to be loaded once. Of course, this method also has limitations. You are welcome to correct me.

This is the end of this article about using CSS filters to write examples of mouse rollover effects. For more relevant CSS filter mouse rollover content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!