How To Create Blur Zoom Hover Effect In Elementor

Creating a blur zoom hover effect in Elementor Pro is a great way to add an extra layer of interactivity to your website. This effect can be used to draw attention to certain elements on your page, or to create a more immersive experience for your vi...

How To Create Blur Zoom Hover Effect In Elementor

In this blog, you will learn how to create a blur zoom hover effect in elementor pro. Here is the used elementor pro version, so if you don’t have elementor pro then you can download it from here: So, we will learn the full process with a few steps so let’s begin:

  • Place the widget
  • Customization
  • Paste the CSS Code
  • Bottom line



First, we have to select a section. So at first here I selected a one column structure and then make the 100vh height. Then place the inner section into it and duplicate a column once more.



After selecting 3 columns we have to make one card box. That's why here I have put the number as an icon and placed the default paragraph and then place the button under the column. Then select a background color and make some border radius to look good.


After putting some content and background color we have to give some padding. Then go to the column settings and then go to the advanced tab and unbind the margin and give a 10px margin to right and left to keep some space from each other. As we need 3 more columns so just duplicate the column twice more and then paste each other styles to look the same.



Now we are ready to put the CSS code but before pasting the CSS code we need to give the CSS class name to the column. Here I give the name called "card", you have to write the same name as me, otherwise, the CSS will not work.


Here is the CSS code is given below you have to just copy it and paste it on the elementor custom CSS. Before you paste the CSS, make sure that you select the inner section, keep in mind that first select the inner section and then go to the advanced tab and then paste the CSS code in the inner section CSS.

    selector{      --zoom-in: 1.2;      --zoom-out: 0.9;      --hover-background: #FF5300;  }  selector{      transition: all .5;  }  selector:hover .card{      filter: blur(5px);      transform: scale(var(--zoom-out));  }  .card{      transform: scale(1);      transition: all .5s;  }  .card:hover{      transform: scale(var(--zoom-in)) !important;      z-index: 2;      filter: blur(0px) !important;  }  selector .elementor-widget-wrap{      transition: all .5s;  }  selector .card:hover .elementor-widget-wrap{      background: var(--hover-background) !important;  }


After pasting the CSS don't forget to click on the green update button. Now if you minimize the elementor widget bar and check this when you hover on any cards like here above in the image I hover on the 01 cards so, only the 01 card is now visible with some zoom and the rest of the cards are blurry. In the same process if you hover on the other cards only the exact card will be visible with zoom and the rest of the card will blurry. So, that's the process of how you can create a blur zoom hover effect with elementor pro and custom CSS.


So, here in this blog, you have learned how to create a blur zoom hover effect in elementor pro. Here is used elementor pro custom CSS feature to create this effect. So, if you don't have elementor pro then you can download it above the link. Elementor is the most powerful page builder to create fabulous websites but if you wanna create something more attractive then you can use the custom CSS feature. It's a very useful feature of elementor to showcase our own creativity.

The most important thing is that WE MADE A VIDEO ON “HOW TO CREATE BLUR ZOOM HOVER EFFECT IN ELEMENTOR” here’s the link, you can watch this you will better understand:

That’s all there is to it! We hope that you’ve learned something new today and that you’ll be able to apply it to your own website. If you like it then share this post and if you have any questions or feedback on this blog, please leave them in the comments, or you can comment on youtube, we will reply to you shortly!

About Author

Hameed Aslam

  • 284 Post
  • 0 Recent Post

Hameed Aslam is a website design and development expert, as well as an SEO and content strategist. He is the founder of DCreato and many other online ventures. Hameed's skills with web design, development, SEO, and content marketing have helped him achieve success in online business. He loves to help others learn about these topics so that they can also be successful online.

Latest Comments 0 Responses

Login/ Register to Comment