How to add the overlay effect to the hero banner

 

The Overlay effect is a popular hovering visual effect that not only enhances readability but also draws attention to the selected content. In this article, you’ll learn how to design an overlay effect using GemPages in just a few easy steps.

 

Design the Hero Banner 


Step 1: Drag and drop a Hero Banner element to your preferred position and upload your image.

 


Step 2: Select the Design tab, go to Spacing then reduce the top and bottom padding values to 0.

 


Step 3: Switch to the Settings tab to enter this extra class: “gem-custom-hero-banner

 


Add the overlay effect

Step 1: Drag out a Row element and drop it inside the Hero Banner.

 

 

Step 2


Under the Row element's Design tab, increase the top and bottom padding to any large value, for example, 200 px.

 


Then, select a background color under the Background section. This will be the color for your overlay when hovering.

 

 

Step 3

  • Enter this extra class under the Settings tab: “gem-custom-hero-banner-overlay”.
  • Make the Row full-width by switching the toggle.

 

 

Step 4: Right-click on the Row element’s label and select “Edit Code”.

 


Add this line of code into your Row’s CSS code structure and “Save”.

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

}

 


Custom the overlay effect

The overlay is fully functional as a normal row element. Therefore, you can drop other elements inside it. For example, let's give the overlay a text by adding in the Heading element.

 


This is the final result of the Hero Banner's overlay effect.


 

 

Tip: You can set the extra class names however you want and refer to them in the code respectively, as underlined in the image below.


 

 

Step 5: Save and Publish to make your change go live.

 

That’s it! There's so much more about GemPages for you to discover in our Help Center, and if you need more help, please reach out to our GemPages Support Team via email or live chat.

 


Was this helpful?