---
title: "HubSpot Custom Module Tutorial: Image with Colour Overlay"
description: Step-by-step instructions on how to create an image module that displays an overlay colour and text on hover.
image: https://www.stephanieogaygarcia.com/hubfs/Website%20Imagery/Stephanie%20OGay%20Garcia%20-%20HubSpot%20CMS%20Designer%20and%20Developer%20L.png
---

[Skip to Content](https://www.stephanieogaygarcia.com/hubspot-website-development/hubspot-custom-module-tutorial-image-with-colour-overlay#main-content)

[![Stephanie O'Gay Garcia](https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg "Stephanie O'Gay Garcia")](https://www.stephanieogaygarcia.com/)

Open Navigation

- [About](https://www.stephanieogaygarcia.com/about)
- [Services](https://www.stephanieogaygarcia.com/services)
- [Products](https://www.stephanieogaygarcia.com/shop)
- [Work](https://www.stephanieogaygarcia.com/portfolio-work)
- [Blog](https://www.stephanieogaygarcia.com/hubspot-website-development)
- [Contact](https://www.stephanieogaygarcia.com/contact)

- [About](https://www.stephanieogaygarcia.com/about)
- [Services](https://www.stephanieogaygarcia.com/services)
- [Products](https://www.stephanieogaygarcia.com/shop)
- [Work](https://www.stephanieogaygarcia.com/portfolio-work)
- [Blog](https://www.stephanieogaygarcia.com/hubspot-website-development)
- [Contact](https://www.stephanieogaygarcia.com/contact)

[HubSpot Sprocket Icon  HubSpot Website Development ](https://www.stephanieogaygarcia.com/hubspot-website-development)

[tutorial, ](https://www.stephanieogaygarcia.com/hubspot-website-development/tag/tutorial) [custom modules](https://www.stephanieogaygarcia.com/hubspot-website-development/tag/custom-modules)

# HubSpot Custom Module Tutorial: Image with Colour Overlay

 Technical Difficulty: Intermediate

 Written by [ Stephanie O'Gay Garcia ](https://www.stephanieogaygarcia.com/hubspot-website-development/author/stephanie-ogay-garcia)

 First Published:  October 11, 2019

 Last Updated:  October 11, 2019

⚠️ Note that this post hasn't been updated for at least a year and the information may be outdated, proceed with caution! *(Last updated: October 11, 2019)*

This tutorial will walk you through how you can create a simple, customisable module that displays a clickable image that has an overlay colour and text on hover, like this:

![Image with Colour Overlay preview](https://www.stephanieogaygarcia.com/hs-fs/hubfs/HubSpot%20CMS%20Development/Image%20with%20Colour%20Overlay%20preview.jpg?width=1071&name=Image%20with%20Colour%20Overlay%20preview.jpg)

## Add fields to your custom module

Once you [create a new module](https://knowledge.hubspot.com/articles/kcs_article/cos-general/create-and-edit-modules?__hstc=244191962.48bd9cb875fc010d2512f930dbc4a062.1543449189594.1570802325255.1570822179411.403&__hssc=244191962.3.1570822179411&__hsfp=1951371925#create-a-new-module) (you can call it "Image with Colour Overlay"), you can [add the following fields](https://knowledge.hubspot.com/articles/kcs_article/cos-general/create-and-edit-modules?__hstc=244191962.48bd9cb875fc010d2512f930dbc4a062.1543449189594.1570802325255.1570822179411.403&__hssc=244191962.3.1570822179411&__hsfp=1951371925#add-fields-to-your-module) on the right-hand side.

For each one you'll select the right field type (in parenthesis), give them a name and ensure that their variable name matches what appears in code styling below. If you need to add additional options to the fields, details will be given.

- **Background Image (Image) |** `background_image`: the image you'll choose for the background. Choose a default image and, under "Available size options", set it to "Do not show controls"

![Available size options](https://www.stephanieogaygarcia.com/hs-fs/hubfs/HubSpot%20CMS%20Development/Available%20size%20options.jpg?width=300&name=Available%20size%20options.jpg) 

- **Overlay Colour (Color) |** `overlay_colour`: the colour that will appear on hover. Be sure to set the opacity to less than 100!

![Overlay colour](https://www.stephanieogaygarcia.com/hs-fs/hubfs/HubSpot%20CMS%20Development/Overlay%20colour.jpg?width=300&name=Overlay%20colour.jpg)

- **Overlay Text (Rich Text) |** `overlay_text`: this is the text that will appear in your module on hover
- **URL (Link) |** `url`: the url the user will be redirected to when clicking on your box.
- Minimum Height (px) (Number) 
- **Minimum Height (px) (Number) |** `minimum_height_px_`: Set a number that is the minimum height your box should be (in pixels)

![Image with Colour Overlay module - Minimum height](https://www.stephanieogaygarcia.com/hs-fs/hubfs/HubSpot%20CMS%20Development/Image%20with%20Colour%20Overlay%20module%20-%20Minimum%20height.jpg?width=300&name=Image%20with%20Colour%20Overlay%20module%20-%20Minimum%20height.jpg)

Your module's fields should now look something like this: 

![Image with Colour Overlay tutorial - Fields](https://www.stephanieogaygarcia.com/hs-fs/hubfs/HubSpot%20CMS%20Development/Image%20with%20Colour%20Overlay%20tutorial%20-%20Fields.jpg?width=300&name=Image%20with%20Colour%20Overlay%20tutorial%20-%20Fields.jpg)

Make sure that the field names match the ones above or the code below will not work. The order of the fields does not matter, although you can rearrange them to what feels most natural to you.

## Add code to your module

In the HTML + HubL section of the module, add in the following code: 

 {% raw %}`<div class="image-with-colour-overlay-box" style="background-image: url({{ module.background_image.src }}); min-height: {{ module.minimum_height_px_ }}px;" title="{{ module.background_image.alt }}">   {% set href = module.url.url.href %}   {% if module.url.url.type is equalto "EMAIL_ADDRESS" %}     {% set href = "mailto:" + href %}   {% endif %}   <a class="image-with-colour-overlay-box__link" href="{{ href }}" {% if module.url.open_in_new_tab %}target="_blank"{% endif %} {% if module.url.no_follow %}rel="nofollow"{% endif %} style="background-color: rgba({{ module.overlay_colour.color|convert_rgb }}, {{ module.overlay_colour.opacity / 100 }});">     <div class="image-with-colour-overlay-box__content">{{ module.overlay_text }}</div>   </a> </div>`

In the CSS section, add in the following code: 

`.image-with-colour-overlay-box { width: 100%; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; } a.image-with-colour-overlay-box__link { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; opacity: 0; visibility: none; transition: opacity .2s ease, visibility .2s ease; } .image-with-colour-overlay-box:hover a.image-with-colour-overlay-box__link { opacity: 1; visibility: visible; } .image-with-colour-overlay-box__content { text-decoration: none; }`

Your module should now look like this: 

![Image with Colour Overlay module](https://www.stephanieogaygarcia.com/hs-fs/hubfs/HubSpot%20CMS%20Development/Image%20with%20Colour%20Overlay%20module.jpg?width=1688&name=Image%20with%20Colour%20Overlay%20module.jpg)

## Use your module in a template or page

You can now drag your module into any template or page and can adjust the background image, colour and content that appears on overlay, the URL and the minimum height of the module. 

It should expand to fit the full width of the container that you add it to and have a minimum height of what you've set it to. 

## Notes and additional customisation

**Note:** Because there is a link in the module on hover you might see some additional styling pulled in from your site. For example, my website adds an underline on hover so I had to add in this extra line on the CSS to remove that: 

`a.image-with-colour-overlay-box__link:hover { text-decoration: none; }`

This will vary from one website to another.

### Remove the link

If you would prefer not to have a link, you can remove the URL field and update the HTML + HubL code as follows: 

`<div class="image-with-colour-overlay-box" style="background-image: url({{ module.background_image.src }}); min-height: {{ module.minimum_height_px_ }}px;" title="{{ module.background_image.alt }}">   <div class="image-with-colour-overlay-box__overlay" style="background-color: rgba({{ module.overlay_colour.color|convert_rgb }}, {{ module.overlay_colour.opacity / 100 }});">     <div class="image-with-colour-overlay-box__content">{{ module.overlay_text }}</div>   </div> </div>`

and the CSS as follows: 

`.image-with-colour-overlay-box { width: 100%; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; } .image-with-colour-overlay-box__overlay { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; visibility: none; transition: opacity .2s ease, visibility .2s ease; } .image-with-colour-overlay-box:hover .image-with-colour-overlay-box__overlay { opacity: 1; visibility: visible; }`

### Update the transition speed

In the CSS above, the speed with which the overlay appears is set on this snippet: 

`transition: opacity .2s ease, visibility .2s ease;`

You can update the `.2s` to any other time (in seconds), such as `.5s` or `1s`.

### Additional functionality

Adding additional functionality to this module is a little outside of the scope of this tutorial but you can do more. For example, I often [group the fields](https://designers.hubspot.com/docs/modules/grouping-fields-and-logic) above and set a [repeater](https://designers.hubspot.com/docs/modules/repeating-fields-and-loops) so that you can have more than one box in the module, and then use [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) so that they will display side-by-side at the same height regardless of the amount of content you add in.

If you found this helpful, buy me a coffee! ❤️

←  Previous Article

[Set your HubSpot topic or tag page title](https://www.stephanieogaygarcia.com/hubspot-website-development/set-your-hubspot-topic-or-tag-page-title)

Next Article  →

[Apply specific styling to the first page of your HubSpot blog listings](https://www.stephanieogaygarcia.com/hubspot-website-development/apply-specific-styling-to-the-first-page-of-your-hubspot-blog-listings)

Contact

## Get help from a HubSpot CMS Expert

- Custom HubSpot themes and reusable and easy-to-use HubSpot templates and modules
- Technical support and guidance on the HubSpot CMS

[ Tell me about your project ](https://www.stephanieogaygarcia.com/project-details)

##### Contact

Need help with a HubSpot CMS project? Get in touch!

[Email](mailto:stephanie@stephanieogaygarcia.com) | [Contact](https://www.stephanieogaygarcia.com/contact)

##### About

- [ About ](https://www.stephanieogaygarcia.com/about)
- [ Portfolio ](https://www.stephanieogaygarcia.com/portfolio-work)
- [ LinkedIn ](https://www.linkedin.com/in/stephanieogaygarcia/)
- [ Facebook ](https://www.facebook.com/stephanieogaygarcia)
- [ Instagram ](https://www.instagram.com/stephanieogaygarcia/)

##### Services

- [ HubSpot Website Development ](https://www.stephanieogaygarcia.com/services/hubspot-website-development)
- [ HubSpot CMS Technical Support ](https://www.stephanieogaygarcia.com/services/hubspot-cms-technical-support)
- [ Custom HubSpot CMS Themes ](https://www.stephanieogaygarcia.com/custom-hubspot-cms-hub-themes)
- [ Pricing ](https://www.stephanieogaygarcia.com/services#pricing)

##### Latest Articles

- [How to add an llms.txt page to your HubSpot website](https://www.stephanieogaygarcia.com/hubspot-website-development/add-an-llmstxt-page-to-your-hubspot-website)
- [Switch an existing HubSpot custom module from global to local](https://www.stephanieogaygarcia.com/hubspot-website-development/switch-an-existing-hubspot-custom-module-from-global-to-local)
- [Overriding HubSpot's new forms styling from theme settings](https://www.stephanieogaygarcia.com/hubspot-website-development/overriding-hubspots-new-forms-styling-from-theme-settings)
- [All Articles](https://www.stephanieogaygarcia.com/hubspot-website-development)

---

 Copyright © 2018 - 2026 Stephanie O'Gay Garcia. All Rights Reserved.   
Freelance HubSpot CMS Developer based in Toronto, Canada 🇨🇦   
[Terms of Service](https://www.stephanieogaygarcia.com/terms-of-service) | [Website Terms of Use](https://www.stephanieogaygarcia.com/website-terms-of-use) | [Privacy](https://www.stephanieogaygarcia.com/privacy-policy) | [Cookies](https://www.stephanieogaygarcia.com/cookie-policy) | [LLMs](https://www.stephanieogaygarcia.com/llms.txt)

Scroll to Top

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.stephanieogaygarcia.com/#person",
  "@type" : "Person",
  "description" : "Freelance HubSpot CMS Developer specializing in custom HubSpot website development, themes, templates, and bespoke modules for small–mid sized B2B and SaaS companies.",
  "image" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg",
  "jobTitle" : "Freelance HubSpot CMS Developer",
  "knowsAbout" : [ "HubSpot CMS", "HubSpot themes", "HubSpot templates", "HubSpot modules", "HubDB", "Website migrations to HubSpot CMS", "Figma to HubSpot implementation" ],
  "name" : "Stephanie O'Gay Garcia",
  "sameAs" : [ "https://www.linkedin.com/in/stephanieogaygarcia/", "https://www.facebook.com/stephanieogaygarcia", "https://www.instagram.com/stephanieogaygarcia/", "https://ecosystem.hubspot.com/marketplace/solutions/stephanie-ogay-garcia/" ],
  "url" : "https://www.stephanieogaygarcia.com/",
  "worksFor" : {
    "@id" : "https://www.stephanieogaygarcia.com/#organization"
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.stephanieogaygarcia.com/#organization",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "IE",
    "addressLocality" : "Dublin",
    "postalCode" : "A94"
  },
  "contactPoint" : {
    "@type" : "ContactPoint",
    "areaServed" : "Worldwide",
    "availableLanguage" : [ "en", "es" ],
    "contactType" : "sales",
    "email" : "stephanie@stephanieogaygarcia.com"
  },
  "description" : "Portfolio and business site of freelance HubSpot CMS Developer Stephanie O'Gay Garcia, based in Dublin, Ireland.",
  "logo" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg",
  "name" : "Stephanie O'Gay Garcia",
  "sameAs" : [ "https://www.linkedin.com/in/stephanieogaygarcia/", "https://www.facebook.com/stephanieogaygarcia", "https://www.instagram.com/stephanieogaygarcia/", "https://ecosystem.hubspot.com/marketplace/solutions/stephanie-ogay-garcia/" ],
  "url" : "https://www.stephanieogaygarcia.com/"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.stephanieogaygarcia.com/#website",
  "@type" : "WebSite",
  "name" : "Stephanie O’Gay Garcia – Freelance HubSpot CMS Developer",
  "publisher" : {
    "@id" : "https://www.stephanieogaygarcia.com/#organization"
  },
  "url" : "https://www.stephanieogaygarcia.com/"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Stephanie O'Gay Garcia",
    "url" : "https://www.stephanieogaygarcia.com/hubspot-website-development/author/stephanie-ogay-garcia"
  },
  "dateModified" : "2019-10-11T20:40:49.998Z",
  "datePublished" : "2019-10-11T20:34:36.000Z",
  "headline" : "HubSpot Custom Module Tutorial: Image with Colour Overlay",
  "mainEntityOfPage" : {
    "@id" : "https://www.stephanieogaygarcia.com/hubspot-website-development/hubspot-custom-module-tutorial-image-with-colour-overlay",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg"
    }
  }
}
```