Video Play on Hover Interaction
I’m inserting the following code in the <head> of the website. Write a script using jQuery to control the playback of a video element with the ID ‘my-video‘, without creating a var, just with ‘this’ keyword. Ensure the ‘video’ element inside the ‘#my-video‘ container is selected explicitly within the mouseout event handler. When the mouse is over the video, it should start playing, and when the mouse leaves the video, it should pause. Ensure the generated code is streamlined, containing only the script and library call without any additional HTML structure such as <html>, <head>, <body>, <video>, etc.
- Video Source: Confirm that the video used in the Elementor Video Widget is sourced from a self-hosted location
- Elementor Video Widget Setup: Edit the settings of the Elementor Video Widget. In the Advanced tab, assign the unique ID ‘my-video’ to the widget.
- Custom Code Placement: Place the provided jQuery code in the Custom Code section of Elementor. In the conditions settings, set it to the Entire Site if you want the code to work on all pages of your website.
Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!
Button’s icon rotates and text moves on hover
Make a smooth rotate transform of 360deg with a transition of 0.8s on the button icon when hovering on the entire button. At the same time move the position of the button text 5px to the right, with a transition of 0.8s when hovering on the entire button. Add a smooth transition after removing the hover state.
Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!
Button’s icon grows and text moves on hover
Make a smooth scale transform of 1.5 with a transition of 0.5s on the button icon when hovering on the entire button. At the same time move the position of the button text 8px to the right, with a transition of 0.5s when hovering on the entire button. Add a smooth transition after removing the hover state.
Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!
Infinity up-down icon animation
Add a continuous and smooth effect to the icon. The animation should slide down and then slide up infinitely using CSS. The animation should stop when the mouse hovers over it.
Please note that, much like any other AI-generated content tool, the outcomes obtained from the suggested prompts in the Prompt Library can vary even when using the same prompt. Embrace the diversity and creativity in each result!
Discover a World of Possibilities with AI
Generate Images 
with AI
Use the brain power of AI to create one-of-a-kind images that you can edit and fine-tune without ever leaving the Editor environment.
Create Text with Generative AI
Embrace an efficient approach to content creation with AI that generates, enhances, and translates copy to fit any element seamlessly.
Write Custom
Code with AI
Generate Custom CSS code to gain complete control over your website styling while maintaining a lightweight and flexible design.
Build AI-Generated Container Layouts
Let AI create your container layouts including content, style, images, fonts, etc., according to your prompt request.
Choose Your Elementor AI Plan
- One AI subscription covers all your Elementor websites
Non-refundable, try it free on any Elementor Website. Compatible with Elementor 3.13 and higher.
By purchasing Elementor AI, you agree to our AI Terms & Conditions
All subscriptions renew based on your billing cycle at list price.