![Element Glitch tutorial Webflow](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62fa23b318d02fba2e7d0efd_main%20image%20glitch.webp)
Related articles:
How to create
To achieve this effect, we need to create 2 other variants of the original image, one green and one red. On hover the interaction will quickly flicker between the 3 several times over with some blur then come full circle back to the original.
Set up the image layers
Duplicate the image you wish to apply the effect to twice, we are going to create the green and red versions first, then set up the interactions.
![Statue images we used](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e7d72273683a230941a8b2_statue%20images%20(1).webp)
Set the position of both to ‘Absolute’ and ensure it is set to ‘Full'. This ensures the image is filling the same space as the original. Ensure the Z-index is higher than the original so that the 2nd image is on top, so that we can see it for editing purposes.
![Set some settings to the images](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e7d847c5921225853de352_settings%20for%20statue%20image%20(1).webp)
Scroll down the inspector panel on the right hand side to ‘Filters' and depending on your original image apply filters to adjust it to a bright turquoise green you are happy with.
![Setting filters to get bright turquoise green version](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e7d8db81795995c4c29dfc_setup%20filters%20on%20statue%20image%20(1).webp)
Repeat this step for the red version, Z-index to adjust where the image is so that you can see it for editing purposes.
![Setting filters to get red version](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e7da1f1148f41e6f033222_setup%20filters%20step%202%20(1).webp)
Then set the red image layer to a Z-index of ‘-2’ and the blue layer to ‘-1’. The original image Z-index should be blank or set to '0':
![set up z index of red image layer](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e7daa779f3dded06062c4a_change%20position%20for%20statue%20red%20image%20(1).webp)
You should now have 3 versions of the image:
- The original
- Red version
- Green version
With the red & green versions behind the original in Z-index order.
Set up the interaction on hover
Next we need to turn these 3 images into the glitch on hover interaction.
Select the original top image and set up a new hover interaction:
![setting up hover to the original top image](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e7fa37d192010e9d5f958f_step%201%20hover%20effect%20(1).webp)
![Creating new animation](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e7fa899aaa8b78687a773b_step%202%20creating%20new%20animation%20(1).webp)
Next set up 3 new starting animations for Blur filter, opacity and move. Check the box for each of ‘Set as initial state’. Blur filter set to 0px, Opacity at 100% and move at 0,0,0.
![Set up 3 new starting animations for Blur filter](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e7fb1c147bcd5a8d93ba11_step%203%20glitch%20hover%20(1).webp)
Next lets set up moves for each coloured layer that moves it horizontally and vertically by a few pixels and another one that increases the original image filter blur from 0px to 2px
![set up moves for each coloured layers](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e7fbd7455c8e2fa1078f95_setup%20moves%20for%20each%20one%20colour%20layer%20(1).webp)
Then let's move the red layer by -8px to offset it from the original. All interaction layers should have super short durations between 0.01 or 0.02, this ensures that they flicker rapidly.
![set up move for red layer](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e7fca70ff53b553fbd0e74_set%20short%20duration%20to%20every%20layer%20(1).webp)
Repeat this for the green layer:
![set up move for green layer](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e7fd620e190c355747ff71_set%20short%20duration%20for%20green%20layer%20(1).webp)
then for the original image layer set the opacity to 0, set up more layers that toggle the opacity between 100% and 0 once more.
![set the opacity for original image layer](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e80013880c36cdfa178804_set%20opacity%20to%20original%20img%20(1).webp)
Between this we move the red around and have it finally for the last move set back to 0px:
![set some last moves for red layer](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e8048a14c60b224091f8c8_red%20layer%20move%20(1).webp)
and same for the green layer:
![set some last moves for green layer](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e805a4a96ecbab9f0ff78c_green%20layer%20move%20(1).webp)
Add a final filter towards the end that brings the blur back to 0px:
![adding final filter](https://cdn.prod.website-files.com/60e2dd6643b87eb91114618e/62e80802e037202d410b361e_adding%20final%20filter%20(1).webp)
Play the interaction to see how it looks and tweak the timing and move properties until you’re happy with it.
Found this article helpful? Check out our agency site at: www.karpi.studio
and our other tutorial articles here
Subscribe to receive the latest blog posts to your inbox every week.
69 steps pre-launch checklist is the most complex checklist developed by years of experience in Karpi Studio.
You will find how to test and fix:
- loading speed issues,
- responsivity issues on all current devices,
- SEO issues,
- and many more.