Custom HTML: How to add text overlay on mouse hover to video

• 

  jacklegacy12 · Member · Jul 8, 2022 at 12:50 am

  • Copy link
  • Add topic to favorites

  Hi guys I’m in the rough stages of building a portfolio website and have little to no experience using Custom HTML/CSS

  I have manged to successfully add an autoplay of a video on mouse hover using HTML code.
  However I need help adding a simple dark overlay with a text title reveal when cursor moves over the video.

  Does anyone have the code for this? Or if this is a custom CSS solution.

  I’m using Elementor Pro

  Cheers

  Current custom HTML code for video:

  <video onmouseover=”this.play()” onmouseout=”this.pause();this.currentTime=0;”>
  <source src=”https://wordpress-479789-2702634.cloudwaysapps.com/wp-content/uploads/2022/07/videoplayback.mp4″ type=”video/mp4″></source>
  </video>

• 

  jacklegacy12 · Member · Jul 8, 2022 at 12:52 am

  • Copy link

  Website that needs support:

  https://wordpress-479789-2702634.cloudwaysapps.com/?preview_id=5952&preview_nonce=96e55afa52&preview=true

• 

  kokkieh · Staff · Jul 8, 2022 at 6:23 am

  • Copy link

  Hi there,

  Your site is not hosted on WordPress.com, but using the open source WordPress.org software at another hosting provider.

  Please contact support at Elementor directly for help with this.

  For general help with the version of WordPress you’re using, you can ask the WordPress.org community over at https://wordpress.org/support/forums/