I wanted to do a reveal with the following elements:
- It masks a region behind a layer. In this case, a PNG with some transparency
- On hover, it zooms and adds a blur effect to make it look misty
- As it zooms in, its opacity diminishes
- I added some JQuery code to remove the misty layer altogether.
- The shape of the foreground image can be changed.
See the Pen Mist Donut by Shawn DeWolfe (@dewolfe001) on CodePen.