How to Create Glowing Frame Effect on Image using Divi - WpBuilt 1350476922971705023
How to Create Glowing Frame Effect on Image using Divi

How to Create Glowing Frame Effect on Image using Divi

  • Posted July 10, 2020 by Elementor Resources
  • Tutorials
  • 0 Comments

 

 

Step 1 : On the Front end builder insert a regular section  

 

Step 2 : After adding a section, a new pop up box  will appear so choose what is the row you need for your module. 

 

Step 3 : Then search and add the image module on the divi row.

 

Step 4: Get the class of the image using the inspect element on dev tools and click on the inspector style sheet.

Step 5: On the inspector add this css style. The hex color depends on your choice. 

img.lazyloaded {
 
   animation: glow 1s ease-in-out infinite alternate;
}



-webkit-keyframes glow {
  from {
 box-shadow :  0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00289978, 0 0 30px #00289978, 0 0 40px #00289978, 0 0 50px #00289978, 0 0 60px #00289978;
  }

  to {
    
    box-shadow : 0 0 10px #fff, 0 0 20px #00a093, 0 0 30px #00a093, 0 0 40px #00a093, 0 0 50px #00a093, 0 0 60px #00a093, 0 0 70px #ff4da6;
  }
}

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

Leave a Reply

wp-cta.png

Get your FREE Web
Design Brief Template

Get your FREE Web
Design Brief Template

×

Cart