Hover Archives - Prompts for Elementor

Prompt library

AI Prompt Library: Hover

Last Updated: January 9, 2024

Note – To use this new AI feature, you will need to activate the ‘Build with AI’ experiment

Content based

Css

From scratch

Generative

JavaScript

Animation

Background

Box delivery

Brainstorming

Business development

Button

Chat

Clock

Customer Service

Description

Digital Art

eCommerce

Form

Gradient

Handmade

Help Center

Hover

Illustration

Isometric

Marketing

Marketing strategy

Target

Text

Title

Vector

Surreal

Shape divider

CTA

Mask effect

Scrolling effect

Newsletter

Star rating

Wireframe

Counter

Video

Confetti

Icon Box

Carousel

Social Icons

Divider

Code

Custom CodeJavaScript

Pro

Hover, Video

https://prompts.elementor.com/wp-content/uploads/2024/01/Video-Play-on-Hover-Interaction.mp4#t=0.01

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.

NOTES

Rate this prompt

Notes:

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!

Last Updated: January 9, 2024

Code

Css

Pro

Animation, Button, Hover

https://prompts.elementor.com/wp-content/uploads/2023/11/Buttons-icon-rotates-and-text-moves-on-hover_01112023.mp4#t=0.01

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.

NOTES

Rate this prompt

Notes:

Last Updated: February 20, 2024

Code

Css

Pro

Animation, Button, Hover

https://prompts.elementor.com/wp-content/uploads/2023/11/Buttons-icon-grows-and-text-moves-on-hover_01112023.mp4#t=0.01

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.

NOTES

Rate this prompt

Notes:

Last Updated: February 20, 2024

Code

Css

Pro

Animation, Hover

https://prompts.elementor.com/wp-content/uploads/2023/10/Infinity-up-down-icon-animation_301020232320.mp4#t=0.01

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.

NOTES

Rate this prompt

Notes:

Last Updated: May 9, 2024

Discover a World of Possibilities with AI

AI Images

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.

AI Text

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.

AI Code

Write Custom Code with AI

Generate Custom CSS code to gain complete control over your website styling while maintaining a lightweight and flexible design.

AI Containers

Build AI-Generated Container Layouts

Let AI create your container layouts including content, style, images, fonts, etc., according to your prompt request.

Elementor AI

AI Starter

/mo

Billed annually at

/year

24,000 Credits 30 Days History Storage Features Generates Text, Code, Images Builds Container Layouts AI Context AI Copilot One subscription covers all your Elementor websites

AI Power

/mo

Billed annually at

/year

50,000 Credits 30 Days History Storage Features Generates Text, Code, Images Builds Container Layouts AI Context AI Copilot One 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

The above prices do not include applicable taxes based on your billing address. Unless otherwise specified, prices are in USD. The final price will be displayed on the checkout page. All plans renew annually at list price.

The price above includes Israeli VAT based on your billing address.

Have an amazing idea for a prompt?

Tell us about it so we can add it to our prompt library and others can benefit.

Thank you!

Thank You!
The Elementor Team

Elementor is the leading website builder platform for professionals on WordPress. Elementor serves web professionals, including developers, designers and marketers, and boasts a new website created every 10 seconds on its platform.

Subscribe to our newsletter

By entering your email, you agree to our
Terms & Conditions and Privacy Policy.