Image to text with hover effect on multicolumn

Solved

Image to text with hover effect on multicolumn

Crystalwclee
Tourist
7 0 2

Hi, I'm trying to achieve the effect where I hover over to the column in my multicolumn under hero ingredient and it will change to text display. Here is an example what I am trying to achieve. Please help and thanks in advanced!

Here's my product url link https://compoundcosmetics.com/products/relief-balm

 

Crystalwclee_0-1720669929028.png

 

Accepted Solution (1)

Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@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"
},

 

Vinsinfo_0-1720690521652.png

 

4. Then search "</li>" and paste the below code before the first "</div>" like below image and save changes.

 

{%- if block.settings.hover_text != blank -%}
    <div class="rte multicolumn-hover-text">{{ block.settings.hover_text }}</div>
{%- endif -%}

 

Vinsinfo_1-1720690532355.png

 

5. Click "Exit" icon and then click "Customize" mode on your current theme.
Vinsinfo_2-1720693133822.png
6. Go to "Multicolumn" section on your PDP then click "Column".
Vinsinfo_3-1720693144265.png
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.
Vinsinfo_4-1720693165731.png
NOTE: You have to do this for each "Column" in "Multicolumn" section.
8. Then click "Multicolumn".
Vinsinfo_5-1720693186993.png

 

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;
}

 

Vinsinfo_6-1720693200991.png

 

 
Result will be like,
Vinsinfo_7-1720693236564.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
8467 1665 1676

Hi @Crystalwclee 

Your store has password-protected 

Screenshot 2024-07-11 at 11.01.28.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Crystalwclee
Tourist
7 0 2
Sorry, the password is now removed.

BrainStation23
Shopify Partner
378 57 55

Hello @Crystalwclee. It is possible by using css and you will need restructure your html/liquid markup as well to achieve this. If not mistaken you're using studio theme. Here is a sample code:

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

{%- style -%}
  .hide {
    display: none;
  }
  
  .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;
    }
  }
{%- 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
-%}

<div class="multicolumn color-{{ section.settings.color_scheme }} gradient{% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}">
  <div
    class="page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
    {% if settings.animations_reveal_on_scroll %}
      data-cascade
    {% endif %}
  >
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin multicolumn__title">
        <h2 class="title inline-richtext {{ section.settings.heading_size }}">
          {{ section.settings.title }}
        </h2>
        {%- if section.settings.button_label != blank and show_mobile_slider -%}
          <a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">
            {{- section.settings.button_label | escape -}}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}
    <slider-component class="slider-mobile-gutter">
      <ul
        class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--tablet grid--peek{% endif %}"
        id="Slider-{{ section.id }}"
        role="list"
      >
        {%- 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 -%}

           <style>
                .container-{{ block.id }}:hover .text-{{ block.id }} {
                  display: none;
                }
                .container-{{ block.id }} .content-{{block.id}} {
                  display: none;
                }
                .container-{{ block.id }}:hover .content-{{ block.id }} {
                  display: block;
                  background: skyblue;
    border-radius: 50%;
    padding: 5rem;
                }
          </style>

          <li
            id="Slide-{{ section.id }}-{{ forloop.index }}"
            class="multicolumn-list__item container-{{ block.id }} grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {{ block.shopify_attributes }}
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style="--animation-order: {{ forloop.index }};"
            {% endif %}
          >
            <div class="multicolumn-card content-container">
             
              {%- if block.settings.image != blank -%}
                {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
                  {% assign spaced_image = true %}
                {% endif %}
                <div class="multicolumn-card__image-wrapper text-{{  block.id }} multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
                  <div
                    class="media media--transparent media--{{ section.settings.image_ratio }}"
                    {% if section.settings.image_ratio == 'adapt' %}
                      style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
                    {% 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 '
                    }}
                  </div>
                </div>
              {%- endif -%}
              <div class="multicolumn-card__info">
                {%- if block.settings.text != blank -%}
                  <div class="rte content-{{ block.id }}">{{ block.settings.text }}</div>
                {%- endif -%}
                
                {%- if block.settings.title != blank -%}
                  <h3 class="inline-richtext">{{ block.settings.title }}</h3>
                {%- endif -%}
                
                {%- if block.settings.link_label != blank -%}
                  <a
                    class="link animate-arrow"
                    {% if block.settings.link == blank %}
                      role="link" aria-disabled="true"
                    {% else %}
                      href="{{ block.settings.link }}"
                    {% endif %}
                  >
                    {{- block.settings.link_label | escape -}}
                    <span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span></a
                  >
                {%- endif -%}
              </div>
            </div>
            
          </li>
        {%- endfor -%}
      </ul>

      {%- if show_mobile_slider -%}
        <div class="slider-buttons large-up-hide">
          <button
            type="button"
            class="slider-button slider-button--prev"
            name="previous"
            aria-label="{{ 'general.slider.previous_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ section.blocks.size }}</span>
          </div>
          <button
            type="button"
            class="slider-button slider-button--next"
            name="next"
            aria-label="{{ 'general.slider.next_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
        </div>
      {%- endif -%}
    </slider-component>
    <div class="center{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
      {%- if section.settings.button_label != blank -%}
        <a
          class="button button--primary"
          {% if section.settings.button_link == blank %}
            role="link" aria-disabled="true"
          {% else %}
            href="{{ section.settings.button_link }}"
          {% endif %}
        >
          {{ section.settings.button_label | escape }}
        </a>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.multicolumn.name",
  "class": "section",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "t:sections.multicolumn.settings.title.default",
      "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"
        },
        {
          "value": "hxl",
          "label": "t:sections.all.heading_size.options__4.label"
        },
        {
          "value": "hxxl",
          "label": "t:sections.all.heading_size.options__5.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": "t:sections.multicolumn.settings.button_label.default",
      "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": "scheme-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": "inline_richtext",
          "id": "title",
          "default": "t:sections.multicolumn.blocks.column.settings.title.default",
          "label": "t:sections.multicolumn.blocks.column.settings.title.label"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "t:sections.multicolumn.blocks.column.settings.text.default",
          "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 %}


The output of this code is given below:

BrainStation23_0-1720688820416.png

This is the initial UI. If you've hover over the first item then UI will be:

BrainStation23_1-1720689056074.png

 

Of course more styling, adjusting, responsiveness need to be handled in this code which we didn't do as we don't have your exact code.

Let us know if you've any query or help.

Brain Station 23 PLC (Mail: js.team@brainstation-23.com)
- Was your question answered? Mark it as an Accepted Solution
- Did the solution not address your concern? We kindly request that share or mail your store URL with us this will enable us to collaborate more closely.
- Explore our Shopify public apps

Small_Task_Help
Shopify Partner
528 16 36

Hi,

 

You can try the following 

 

At Edit code find the section where your multicolumn layout is defined and add html code

 

Example of html code

<div class="hero-ingredient">
  <div class="multicolumn">
    <div class="column" onmouseover="showText(this)" onmouseout="hideText(this)">
      <img src="your-image-url.jpg" alt="Image 1">
      <div class="text-overlay">Text for Image 1</div>
    </div>
    <div class="column" onmouseover="showText(this)" onmouseout="hideText(this)">
      <img src="your-image-url.jpg" alt="Image 2">
      <div class="text-overlay">Text for Image 2</div>
    </div>
    <!-- Add more columns as needed -->
  </div>
</div>

Example of CSS code for styling

.hero-ingredient .multicolumn {
  display: flex;
}

.hero-ingredient .column {
  position: relative;
  margin: 10px;
}

.hero-ingredient .column img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-ingredient .text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-ingredient .column:hover .text-overlay {
  opacity: 1;
}

Example for Javascript for hover effect

function showText(element) {
  element.querySelector('.text-overlay').style.opacity = 1;
}

function hideText(element) {
  element.querySelector('.text-overlay').style.opacity = 0;
}


If you are not able to do coding by yourself you can go for developer support

Click here to Contact and Get Shopify Store Help
E-mail - hi@ecommercesmalltask.com
We are Shopify Experts   from Ecommerce Small Task Company.

Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@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"
},

 

Vinsinfo_0-1720690521652.png

 

4. Then search "</li>" and paste the below code before the first "</div>" like below image and save changes.

 

{%- if block.settings.hover_text != blank -%}
    <div class="rte multicolumn-hover-text">{{ block.settings.hover_text }}</div>
{%- endif -%}

 

Vinsinfo_1-1720690532355.png

 

5. Click "Exit" icon and then click "Customize" mode on your current theme.
Vinsinfo_2-1720693133822.png
6. Go to "Multicolumn" section on your PDP then click "Column".
Vinsinfo_3-1720693144265.png
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.
Vinsinfo_4-1720693165731.png
NOTE: You have to do this for each "Column" in "Multicolumn" section.
8. Then click "Multicolumn".
Vinsinfo_5-1720693186993.png

 

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;
}

 

Vinsinfo_6-1720693200991.png

 

 
Result will be like,
Vinsinfo_7-1720693236564.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
Crystalwclee
Tourist
7 0 2

This is perfect and it works now! Thank you so so much for your assistance! 

Crystalwclee
Tourist
7 0 2

Hi, sorry can I ask for one more help? Is it possible for the hovered text to have different colour text and background?