Home » Tutorials » 25+ Elementor Text Over Image Effect Collection
For Elementor users adding elementor text over image is not a big deal. You can add a nice elementor image with text overlay with Master Addons. Image hover effects widget included as a free element of Master Addons for Elementor Plugin.
Sometimes it’s necessary to implement hover text over image. In some cases, you need to insert multiple images inside a webpage. It’s better to explain each image using text. It looks odd if you place a caption for each image. Hover text over image will help you to figure out this. You can jump over to this Image Hover Effects for Elementor video docs.
There are more than 25+ unique hover effects available. We have developed nice CSS image hover effects that will make your webpage more understandable. Besides this Image Hover Effects addon, you should check the Advanced Image Element too. Using this you can add an amazing 3d tilt effect with Ribbon.
You can add Image, Text, Elementor Saved Section as popup. Design an awesome popup using Elementor page editor and saved it as a section first. After adding Master Addons Image hover effects element, you can select that saved section and implement it as on click popup for the image hover effects widget. Why don’t you check the following GIF animation for on click popup.
We’ve developed an individual Border Radius system for your image hover effects. You can define different values for top, bottom, left, right border-radius. Sometimes it makes your design very professional.
Make sure to download and configure Master Addons on your WordPress website. Free Elementor page builder required to work with Master Addons plugin.
Drag Image hover effects element to your elementor page editor. You will get the element inside master addons element collection section. After adding this element, you will get the customization panel. You have add image, link, content, social media, etc here.Â
It will show you a notice to select image. Upload your image via WordPress media library and select the image. Now it’s time to define the best image hover effect for your image. You will see a lot of pre-built effects like the screenshot. Test one by one and choose the perfect one that suits your page properly.
You have three option to select, None, Popup, and External links. This all works on image click. If you want only image hover effects then select none for mouse click. Perhaps, if you want popup or external links on click then select whether you want. There are 5 different popup content, image, content, saved section, saved widget, and saved page template.Â
You can see Heading, Description options underneeth the previous popup option. Just input your content inside the heading and des option. You able to see the content instantly inside your image hover effects element.Â
Now it’s time to check the style option. Within the style area you able to select typo, change color, background color. There are image, title, description, and social media sections available. For image styling – you can choose background color, image opacity, border, image filter. For title and description, you will get typo change, color, and box-shadow option. Lastly, for social media, you will see color and hover color options there.
That’s all about image hover effects. Arrange your text nicely on your desired image and apply a perfect hover effect to your image. There are some effects which available on free but if you want to get all effects, you should upgrade the plugin. If you face any problem then feel free to drop a message here.Â