Custom Hover using a nav element and connect to an image element.

How To
3

Hey @orases-support,
Welcome to the Bricks forum! :waving_hand:

From the structure you shared, I don’t think there’s a direct way to assign the category_hero_image ACF field as an attribute on the default nav <a>.

So here’s my suggestion:
First, try setting this up with static data (just to confirm the hover effect works) before connecting it to ACF.

Steps:

  1. Add a list of text links with the class .hero-nav-link.
  • Give each link a custom attribute, e.g. data-hero-img="your-image-url".
  1. Add the class .hero-dynamic-img to your hero image element.
  • For the default image, don’t use the Bricks image selector — instead, set a custom image URL.
  • Tip: Use the relative path after /wp-content/... instead of the full site URL. That way, you won’t need to update it when moving from staging to live.
  1. Add this JS snippet to handle the hover effect:
document.addEventListener("DOMContentLoaded", function () {
  const navLinks = document.querySelectorAll(".hero-nav-link");
  const heroImg = document.querySelector(".hero-dynamic-img");

  if (!heroImg) return;

  const defaultImg = heroImg.getAttribute("src");

  navLinks.forEach(link => {
    link.addEventListener("mouseenter", function () {
      const newImg = this.getAttribute("data-hero-img");
      if (newImg) {
        heroImg.setAttribute("src", newImg);
      }
    });

    link.addEventListener("mouseleave", function () {
      heroImg.setAttribute("src", defaultImg);
    });
  });
});

This way, your hero image dynamically updates when users hover over a nav item.
Once you’ve tested it with static images, you’ll have a clear idea of how to adapt it to pull the image URLs dynamically from your ACF fields.