Adding hover images to both images in the Dawn theme Image Banner

Store Design
, ,

Topic summary

A user is attempting to customize the Dawn theme’s Image Banner to display hover effects on images, but is encountering issues with event handling.

Core Problem:

  • Neither JavaScript click/hover events nor CSS :hover pseudo-selectors are working on the child divs containing images
  • The user suspects an overlaying element may be blocking interaction with the child divs

Technical Context:

  • The structure consists of one parent div containing two child divs, each with its own image
  • Goal is to toggle class names on hover to show/hide the top image
  • Code snippets provided show the imageBanner.liquid template structure

Current Status:
The discussion remains open with no responses yet. The user is seeking help to identify why the divs are not responding to hover or click events.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

I’m trying to customize the Image Banner in the Dawn theme so that when the user hovers on one of the images it changes to a different image.

The first step I’m trying to solve is getting an event to fire when one of the images is hovered over. The imageBanner.liquid has one div surrounding 2 divs, each with their own image, I would like to add an event to the children div so that I can add or remove a class name when it is hovered on, to make the top image visible/invisible, but it seems that no events are being fired from the children div (almost like an element is above it that is blocking it from being clicked or hovered on).

Another attempt is to use the pseudo selector :hover in the stylesheet, but that also has no effect (i.e. nothing happens when the selector is placed on the children divs)

Could anybody help me out in figuring out why there is no click event for these divs?

Below is the important part of the code with everything else removed, and at the bottom of the page is a larger section of the code if more context is needed.


    

      {% comment %} Image code is here {% endcomment %}
    

    
      {% comment %} Image code is here {% endcomment %}

More context (Parent div and one of the children divs containing the code for the image)


  {% comment %} First Image {% endcomment %}
  {%- if section.settings.image != blank -%}
    

      {%-liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
          assign image_class = "banner__media-image-half"
        endif
        if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
          assign sizes = "(min-width: 750px) 50vw, 100vw"
        elsif section.settings.image_2 != blank
          assign sizes = "50vw"
        else
          assign sizes = "100vw"
        endif
      -%}
      {{ section.settings.image | image_url: width: 1500 | image_tag:
        loading: 'lazy',
        width: section.settings.image.width,
        height: image_height,
        class: image_class,
        sizes: sizes,
        widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
        alt: section.settings.image.alt | escape
      }}
    

  {%- elsif section.settings.image_2 == blank -%}
    
      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
    

  {%- endif -%}