The final result will perform like this:

Custom Overlay For A Single Hero Banner

Step 01 - Add a new hero banner:

• Drag and drop the Hero Banner into the page.
• Upload your own image or choose one from Gallery
• Add an Extra Class Name: "gem-custom-hero-banner" (We'll refer to this class later in our custom code).

 

Step 02 - Use a row as overlay:

• Drag and drop a Row inside the Hero Banner.
• Add an Extra Class Name: "gem-custom-hero-banner-overlay".
• Increase Row's padding top & padding bottom to a large number (e.g: 200px)
• Change Row's background color to a desired color (e.g: #F3B4AF)
• Decrease Hero Banner's padding-top & padding-bottom to zero. Now the nested Row will cover 100% its area

 

Step 03 - Design the Row Overlay:

• Think of the Row Overlay as any other Row. You can divide it into columns or drag and drop anything inside it. The only limit is your imagination!
• In this tutorial, we'll create a Heading and a Text Block as sub-heading:

 

Step 04 - Use the Liquid module to control the hover effect:

• Drag and drop a Liquid module into your page
• Right-click on its label, choose Edit HTML / Liquid and remove all the code inside.
• Right-click on the label again, choose Edit CSS and add the following code at the bottom:

[data-label="Hero Banner"] > .gem-custom-hero-banner .gem-custom-hero-banner-overlay{ 
transition: all 0.5s ease !important;
opacity: 0 !important;
}
[data-label="Hero Banner"]:hover > .gem-custom-hero-banner .gem-custom-hero-banner-overlay{
opacity: 1 !important;
}

 

(Note: Both classes we added to the Hero Banner and Row in the previous steps are referred in this code)

 

 

Step 05 - Save and preview the page. The result should look like this:

 

Make It Global

You also can apply this effect for all Hero Banners without adding Liquid codes at step 04 - Part I

 

Step 01- From your Shopify admin, go to Online Store > Themes > Actions > Edit Code

 

 

Step 02 - Search for the theme.liquid file. Click on the file to open it in the editor.

 

 

Step 03 - Scroll down and locate this snippet:

 

{% include 'gem-app-header-scripts' %}

After this snippet, paste the following code:

 

<style> 
[data-label="Hero Banner"] > .gem-custom-hero-banner 
.gem-custom-hero-banner-overlay{ 
transition: all 0.5s ease !important; 
opacity: 0 !important; 
} 
[data-label="Hero Banner"]:hover > .gem-custom-hero-banner 
.gem-custom-hero-banner-overlay{ 
opacity: 1 !important; 
} 
<style> 

 

(Note: The part nested inside <style> tag is the same as the one we've used in part I)

 

 

Step 04 - Click Save to save your changes.

 

From now on for any pages, repeat all steps in Part I (without creating Liquid module) to create a hero banner with custom overlay.