# CSS Reverse Blur Focus Hover Effects
[竹白記事本](https://chupainotebook.blogspot.com/2019/02/css-effect.html)，學習紀錄，2019/03/18。

>[CSS Reverse Blur Focus Hover Effects | CSS Focal Lens Hover Effect](https://www.youtube.com/watch?v=kojEyXLrY2w)

###### tags: `filter` `animation` `transform`

## CodePen
>[CSS Reverse Blur Focus Hover Effects](https://codepen.io/chupai/pen/xBjNJp)

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Reverse Blur Focus Hover Effects " src="//codepen.io/chupai/embed/xBjNJp/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/xBjNJp/'>CSS Reverse Blur Focus Hover Effects </a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## filter
>[filter｜MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)

將糢糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像，背景和邊框的渲染。

- `grayscale`，灰階
- `sepia`，懷舊
- `saturate`，飽和
- `hue-rotate`，色相旋轉
- `invert`，負片
- `opacity`，不透明
- `brightness`，亮度
- `contrast`，對比
- `blur`，糢糊
- `drop-shadow`，下拉陰影