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