In this tutorial, we will learn how to create an interactive image gallery using HTML, CSS, and JavaScript on the mega menu WordPress. The gallery will display a list of titles on the left side, and when you hover over a title, the corresponding image will be displayed on the right side. We will implement two versions each with a different hover function. This function you can see in so many professional websites e-commerce. It looks amazing when using it for navigation. So I make the code and want to share it with everyone who is using WordPress.

In this tutorial, I use Elementor to make it. However, this method is working every builder with support for mega menu HTML.

Watch Tutorial Video

Install WordPress Plugin

I used two plugins in this tutorial

  1. Mega menu from Crocoblock
  2. Simple Custom CSS and JS

Set Up the HTML Structure

These are the “left-side” class code and “right-side” class code that you need to create links and images for your hover. In the “left-side” class, I made all the link and “right-side” I added image appropriate to link I wanted.

– Replace “#” with link for your website
– Repace “https://your-image-link-number-1.jpg” with your image link from your media.

HTML

HTML

Create the CSS Styling

You can custom CSS for the link as you want if you have knowledge about CSS. It is easy to find custom CSS online. Here is my simple CSS for the tutorial.

Below is the CSS for the “left-side” class

CSS

Here is the CSS for “right-side” class

CSS

Implement the JavaScript

There are two version of the script with different function. You can choose one of them to fit with your purpose.

Version 1:  When not hover <li> the image content will be back to the first <li>

JS

Version 2: When not hover the image content will stay on the last <li>

JS

Note

If you want to create a second mega menu, you cannot be using same code to apply another menu. I don’t know why Elemetor doesn’t let me do it. The solution is very easy, you just need modify the name all class so far.

for example:  we have “left-side” class, which the second mega menu we change to “left-side2”, same with “right-side2”.

Then duplicate the JS and CSS change to the same Class as “left-side2” and “right-side2”

That’s it

Congratulations! You have successfully created an interactive hover with image gallery using HTML, CSS, and JavaScript. The gallery allows users to view different images by hovering over corresponding titles. You can further customize the styles and add more images or titles as per your requirements.