How to Create Glowing Frame Effect on Image using Divi

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!

• Demo
• Download