(855)-537-2266 sales@kerbco.com

In this Elementor tutorial I will show you how to create a video hover grid showcase. This can be a great way to showcase your video or animation projects. I will show you 2 ways to pull this off.

The first way will be a static version where you can place this video hover effect anywhere on your website.

The second way will be more dynamic and using ACF, Code Snippets and the Loop Grid.

Timestamps:
0:00 Introduction
0:31 Static Video Grid Tutorial Begins
4:18 Dynamic Loop Grid Tutorial Begins
5:24 ACF Post Type (Loop Grid)
6:16 ACF Field Groups (Loop Grid)
8:22 Video Hover Code Snippet (Loop Grid)
10:45 Setup Loop Grid Widget and Template
13:35 *Bonus* Looping Video Hover Effect

Download Video Hover Code:

Auto Play Videos on Hover (Elementor Tutorial)

Code Snippets Plugin:

Code Snippets

Advanced Custom Field:

Advanced Custom Fields (ACF)

Purchase Elementor Pro:
https://wickydesign.com/get-elementor

Our Recommended Tools
Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

WE NOW HAVE MERCH:
https://wickydesign.myspreadshop.com/

WORDPRESS PLUGINS:
✔️ Elementor: https://wickydesign.com/get-elementor
✔️ Crocoblock: https://crocoblock.com/?ref=2562
✔️ Ultimate Add Ons: https://ultimateelementor.com/pricing/?campaign=UE&bsf=8362
✔️ Elementor Custom Skin: https://gumroad.com/a/545789043
✔️ All In One SEO: https://www.shareasale.com/r.cfm?b=1491200&u=2081667&m=94778

BUSINESS TOOLS:
✔️ Dubsado: https://www.dubsado.com/?c=wickydesign
✔️ MailerLite: https://www.mailerlite.com/a/jrdqblbizo
✔️ Wave: https://waveapps.com/

GRAPHICS:
✔️ Adobe: http://clkuk.tradedoubler.com/click?p=264355&a=3228525

WEBSITE HOSTING:
✔️ KnownHost: https://www.knownhost.com/?aid=71319c26

——
For more information regarding our web design and branding services, please visit https://wickydesign.com