Wordpress Elementor Icon hover effect

Welcome to our latest WordPress Elementor tutorial! Simple elementor icon hover effect

Features 

🔸Fully customizable 

🔸Responsive 

  

Tutorial link:

https://youtu.be/X-uJWOUim3Q

☑️Support me on Patreon

https://www.patreon.com/developercrazy

🔸More WordPress Videos playlist 

🔸Unity Videos playlist 

🔸UI Template Download link 

Download link 

Click here to download Elementor file 

Code

<div> <style>\n .glassIco {\n --width: 100px;\n &, & * { box-sizing: border-box; transition: 200ms; } \n color: #fff; \n margin:20px;\n box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(15px);\n box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1); \n overflow: hidden; \n &:before {\n content: \"\";\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.75);\n filter: blur(0px);\n transition: 700ms;\n transform: skewX(-45deg) translateX(calc(var(--width) + 50%));\n }\n \n &:hover {\n transform: translateY(-25px);\n &:before {\n transform: skewX(45deg) translateX(calc(var(--width) * -1 - 50%))\n }\n }\n & > * { opacity: 1; }\n}\n</style> </div>