V4 Extentions Image-Overlay Estimated reading: 3 minutes 3 views Put a color or gradient tint on top of an image. Make images darker, lighter, or match your brand colors. No code needed. WORKS ON Image and SVG OVERLAY Color or Gradient PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons for Elementor before you start. Pro is not needed. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab. Under Utility Extensions, turn on Image Overlay. Click Save Settings. Image Overlay Extension 1 (click to zoom) STEP 2 Add an Overlay Now add a tint to an image in the Elementor editor. Open your page with the Elementor Editor. Select an Image or SVG widget. In the General tab, open the Image Overlay section. Turn on Enable Overlay. Image Overlay Extension 2 (click to zoom) That is all. Pick a color and set how strong it is. Note: This extension works on Image and SVG widgets only. RESULT Final Result Image Overlay Extension 3 (click to zoom) Note: Middle: Color #7c3aed, Opacity 50, Blend Mode Multiply. Right: Gradient from #f05a35 to #7c3aed, Angle 135, Opacity 60, Blend Mode Multiply. SETTINGS Settings Turn on Enable Overlay and the other settings appear. Image Overlay Extension 4 (click to zoom) Image Overlay Extension 5 (click to zoom) Enable Overlay Default: OffTurn the overlay on or off for this image. Overlay Type Default: ColorChoose Color for one flat color, or Gradient for two colors that blend into each other. Color Default: #000000The tint color. Shows when Overlay Type is Color. Gradient Color 1 and 2 Default: #000000 and #ffffffThe two colors of the gradient. Show when Overlay Type is Gradient. Gradient Angle Default: 180The direction of the gradient, from 0 to 360 degrees. 180 goes from top to bottom. Opacity Default: 50How strong the tint is, from 0 to 100. A bigger number covers the image more. Blend Mode Default: MultiplyHow the tint mixes with the image. Normal puts the plain color on top. Multiply makes the image darker. Screen makes it lighter. Overlay adds more contrast. There are 16 modes to try. Enable in Editor Default: OffTurn this on to see the overlay inside the Elementor editor. PER DEVICE Different Overlay Per Screen Size Every setting except Enable in Editor can change per screen size. Use the Desktop, Tablet and Mobile buttons at the top of the editor. Use a stronger tint on mobile, so text on top of the image is easy to read. Turn the overlay off on tablet if you do not want it there. TRY THIS Quick Recipes Dark tint for text Overlay Type: Color Color: #000000 Opacity: 40 Blend Mode: Normal Brand color gradient Overlay Type: Gradient Gradient Color 1: #f05a35 Gradient Color 2: #7c3aed Gradient Angle: 135 Opacity: 60 Blend Mode: Multiply NEED HELP? Troubleshooting I do not see the Image Overlay section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) and turn on Image Overlay. Then reload the editor. Select an Image or SVG widget and open the General tab. I do not see the overlay Make sure Enable Overlay is on and the page is saved. Check that Opacity is not 0. To see the overlay inside the editor, turn on Enable in Editor. Will the overlay block my image link? No. The overlay does not catch clicks, so a link on your image still works. You Did It Your image now has a color tint. If you face any problem, please contact our support team. We are happy to help.
