Select Page

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.

Share this page: Sharing Facebook Twitter LinkedIn Copy Text