Show Other image On Hover in MultiColumn section.

Technical Q&A
, , ,

Topic summary

A developer is attempting to implement a hover effect in Shopify’s Multicolumn section that displays a second image when hovering over the first image, similar to functionality available in product sections.

Current Approach:
The developer has added CSS attempting to swap images on hover using:

.multicolumn-card__image-wrapper:hover .multicolumn-card__image {
  content: url("{{ block.settings.second_image | img_url: 'original' }}") !important;
}

Issue:
The implementation is not working as intended. The code shows an attempt to reference block.settings.second_image within the section-level styles, which may be causing scope issues since block settings are typically accessed within block loops.

Status:
The question remains unanswered with no solutions or alternative approaches provided yet. The developer has shared their full section code including the Multicolumn section structure and styling.

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

I am trying to add feature in Multicolumn Section that When I hover on Image see Another Image Like we Can do in Product Section.But Not able to do it,

This is my Code:

{{ ‘section-multicolumn.css’ | asset_url | stylesheet_tag }}
{{ ‘component-slider.css’ | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
.multicolumn-card__image-wrapper:hover .multicolumn-card__image {
content: url(“{{ block.settings.second_image | img_url: ‘original’ }}”) !important;
display:block;
}

{%- endstyle -%}

{%- liquid
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}

{%- unless section.settings.title == blank -%}

{{ section.settings.title }}

{%- if section.settings.button_label != blank and show_mobile_slider -%} {{- section.settings.button_label | escape -}} {%- endif -%}
{%- endunless -%}
    {%- liquid assign highest_ratio = 0 for block in section.blocks if block.settings.image.aspect_ratio > highest_ratio assign highest_ratio = block.settings.image.aspect_ratio endif endfor -%} {%- for block in section.blocks -%} {%- assign empty_column = '' -%} {%- if block.settings.image == blank and block.settings.title == blank and block.settings.text == blank and block.settings.link_label == blank -%} {%- assign empty_column = ' multicolumn-list__item--empty' -%} {%- endif -%}
  • {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %} {% assign spaced_image = true %} {% endif %}
    {%- liquid assign number_of_columns = section.settings.columns_desktop assign number_of_columns_mobile = section.settings.columns_mobile assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px' assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px' assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px' if section.settings.image_width == 'half' assign image_width = 0.5 elsif section.settings.image_width == 'third' assign image_width = 0.33 else assign image_width = 1 endif -%} {% capture sizes %} (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}), (min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}), (min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}), calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }}) {% endcapture %} {{ block.settings.image | image_url: width: 3200 | image_tag: widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200', sizes: sizes, class: 'multicolumn-card__image' }}
    {%- endif -%}
    {%- if block.settings.title != blank -%}

    {{ block.settings.title }}

    {%- endif -%} {%- if block.settings.text != blank -%}
    {{ block.settings.text }}
    {%- endif -%} {%- if block.settings.link_label != blank -%} {{- block.settings.link_label | escape -}}  {% render 'icon-arrow' %} {%- endif -%}
    • {%- endfor -%}

{%- if show_mobile_slider -%}

{% render 'icon-caret' %} {% comment %}
1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }}
{% endcomment %}
{%- for block in section.blocks -%} {%- endfor -%}
{% render 'icon-caret' %}
{%- endif -%}
{%- if section.settings.button_label != blank -%} {{ section.settings.button_label | escape }} {%- endif -%}

{% schema %}
{
“name”: “t:sections.multicolumn.name”,
“class”: “section”,
“tag”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “inline_richtext”,
“id”: “title”,
“default”: “Multicolumn”,
“label”: “t:sections.multicolumn.settings.title.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “select”,
“id”: “image_width”,
“options”: [
{
“value”: “third”,
“label”: “t:sections.multicolumn.settings.image_width.options__1.label”
},
{
“value”: “half”,
“label”: “t:sections.multicolumn.settings.image_width.options__2.label”
},
{
“value”: “full”,
“label”: “t:sections.multicolumn.settings.image_width.options__3.label”
}
],
“default”: “full”,
“label”: “t:sections.multicolumn.settings.image_width.label”
},
{
“type”: “select”,
“id”: “image_ratio”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__1.label”
},
{
“value”: “portrait”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__2.label”
},
{
“value”: “square”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__3.label”
},
{
“value”: “circle”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__4.label”
}
],
“default”: “adapt”,
“label”: “t:sections.multicolumn.settings.image_ratio.label”
},
{
“type”: “range”,
“id”: “columns_desktop”,
“min”: 1,
“max”: 6,
“step”: 1,
“default”: 3,
“label”: “t:sections.multicolumn.settings.columns_desktop.label”
},
{
“type”: “select”,
“id”: “column_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.multicolumn.settings.column_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.multicolumn.settings.column_alignment.options__2.label”
}
],
“default”: “left”,
“label”: “t:sections.multicolumn.settings.column_alignment.label”
},
{
“type”: “select”,
“id”: “background_style”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.multicolumn.settings.background_style.options__1.label”
},
{
“value”: “primary”,
“label”: “t:sections.multicolumn.settings.background_style.options__2.label”
}
],
“default”: “primary”,
“label”: “t:sections.multicolumn.settings.background_style.label”
},
{
“type”: “text”,
“id”: “button_label”,
“default”: “Button label”,
“label”: “t:sections.multicolumn.settings.button_label.label”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “t:sections.multicolumn.settings.button_link.label”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “background-1”
},
{
“type”: “header”,
“content”: “t:sections.multicolumn.settings.header_mobile.content”
},
{
“type”: “select”,
“id”: “columns_mobile”,
“options”: [
{
“value”: “1”,
“label”: “t:sections.multicolumn.settings.columns_mobile.options__1.label”
},
{
“value”: “2”,
“label”: “t:sections.multicolumn.settings.columns_mobile.options__2.label”
}
],
“default”: “1”,
“label”: “t:sections.multicolumn.settings.columns_mobile.label”
},
{
“type”: “checkbox”,
“id”: “swipe_on_mobile”,
“default”: false,
“label”: “t:sections.multicolumn.settings.swipe_on_mobile.label”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“blocks”: [
{
“type”: “column”,
“name”: “t:sections.multicolumn.blocks.column.name”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.multicolumn.blocks.column.settings.image.label”
},
{
“type”: “image_picker”,
“id”: “second_image”,
“label”: “Second Image (Hover)”
},
{
“type”: “inline_richtext”,
“id”: “title”,
“default”: “Column”,
“label”: “t:sections.multicolumn.blocks.column.settings.title.label”
},
{
“type”: “richtext”,
“id”: “text”,
“default”: “

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

”,
“label”: “t:sections.multicolumn.blocks.column.settings.text.label”
},
{
“type”: “text”,
“id”: “link_label”,
“label”: “t:sections.multicolumn.blocks.column.settings.link_label.label”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.multicolumn.blocks.column.settings.link.label”
}
]
}
],
“presets”: [
{
“name”: “t:sections.multicolumn.presets.name”,
“blocks”: [
{
“type”: “column”
},
{
“type”: “column”
},
{
“type”: “column”
}
]
}
]
}
{% endschema %}

If Anyone Can Help.
Code is working Completely,But when hover It shows no Image(Not show actual image which included).