Image to text with hover effect on multicolumn

Shopify Discussion

Topic summary

Main issue: Implement a hover effect in a Shopify multicolumn section so that images reveal text on hover under the “Hero ingredient” area of a product page.

Key solution adopted: A detailed Liquid/CSS approach for the Studio theme was provided. It adds a new “hover_text” richtext setting to each multicolumn block (via multicolumn.liquid), outputs the hover text in the markup, and uses Custom CSS to overlay and show text on hover. The original poster confirmed this worked.

Other proposed approaches:

  • General guidance to restructure HTML/Liquid and use CSS for hover overlays.
  • Example HTML/CSS/JS overlay technique (positioned text-overlay with opacity transition).

Context/notes:

  • Store was initially password-protected; later unlocked.
  • Code snippets and screenshots are central to replicating the solution.
  • Terms: Liquid (Shopify templating), CSS (styling), PDP (product detail page).

Open questions (unresolved in thread):

  • How to set different text and background colors for the hover text.
  • How to apply a similar hover-to-text effect to Collection List sections sitewide.
  • How to vertically/horizontally center text in the hover overlay.

Status: Resolved for multicolumn hover text display; follow-up styling/extension requests pending.

Summarized with AI on December 13. AI used: gpt-5.
5

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


  

    

      
      
Text for Image 1

    

    
      
      
Text for Image 2

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