Image to text with hover effect on multicolumn

[Vinsinfo]

@Crystalwclee Please follow below steps to display text on multicolumn hover. Let me know whether it is helpful for you.

1. From admin, go to “Online Store” → “Themes”.
2. Click action button from the current theme and select “Edit code”.
3. Go to “multicolumn.liquid” file and search “t:sections.multicolumn.blocks.column.settings.text.label” and paste the below code at the next line of “},” like below image.

{
   "type": "richtext",
   "id": "hover_text",
   "label": "Hover text"
},

4. Then search “
” and paste the below code before the first “” like below image and save changes.

{%- if block.settings.hover_text != blank -%}
    {{ block.settings.hover_text }}

{%- endif -%}

5. Click “Exit” icon and then click “Customize” mode on your current theme.

6. Go to “Multicolumn” section on your PDP then click “Column”.

7. Then scroll down and enter the text in “Hover text” field. The text entered on this field will be display on hovering a multicolumn.

NOTE: You have to do this for each “Column” in “Multicolumn” section.
8. Then click “Multicolumn”.

9. Then scroll down and paste the below code in “Custom CSS” field and save changes.

.multicolumn-card:hover .multicolumn-hover-text {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e4e3db;
}
.multicolumn-hover-text {
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
  display: none;
}

Result will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.