Overlay

For every overlay you are adding you can add effects

• To enable overlay select, Show Overlay
• Go to Style - Overlay - Background Type, Select classic and then choose the image or gradient you have to show in overlay
  
  • You can also edit the color if you have selected gradient or edit the image size, position, attachment and repeat.
  • Then comeback again to the content tab and under overlay you can edit the Hover Effects.
    
  • you can also control the transition duration of the overlay effects
    

Under Style,

• You can edit the Border effect. under Border,
  • Solid - A solid border line is applied to the overlay
    
  • Double - A double border line is applied to the overlay
  • Dotted - A border with dotted lines is applied to the overlay
  • Dashed - Border is applied with dashed lines to the overlay
  • Grooved - Border like which is grooved to the overlay is applied

• You can also edit the width, color and margin of the border in the elementor
• Under Background type you can add classic or gradient for an overlay
• If you have selected Gradient,
  • you will be getting the options to select the color for the gradient, you can select up-to two colors for the gradient effect
  • you can also select the location of the colors, i.e., the height for the displayed colors in an overlay
  • you can also select the type of the gradient effect either radial or linear, radial gives circular gradient effect and the linear gives horizontal gradient effect
  • For Linear effect you can select the angle from 0° to 360° degree
  • For Radial effect you can select from the list of effects under position

• If you have selected Classic,
  • you can add background image as an overlay
  • you can adjust the position, attachment, repeat and size of the image based on your requirement