# Importing Code (CSS) to Hubspot site

**URL:** <https://community.hubspot.com/t/importing-code-css-to-hubspot-site/73070>\
**Category:** CMS Development\
**Created:** [January 17, 2023, 3:10pm UTC](https://community.hubspot.com/t/importing-code-css-to-hubspot-site/73070 "2023-01-17T15:10:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ALang-Norris](https://avatars.discourse-cdn.com/v4/letter/a/5fc32e/32.png) [@ALang-Norris](https://community.hubspot.com/u/ALang-Norris)\
**Post date:** [January 17, 2023, 3:10pm UTC](https://community.hubspot.com/t/importing-code-css-to-hubspot-site/73070/1 "2023-01-17T15:10:00Z")

</div>

Hi guys

I am a very old fashioned marketing manager embracing Hubspot as much as humanly possible. I need a bit of help adding in some code from here: [https://www.w3schools.com/howto/tryit.asp?filename=tryhow\_css\_image\_overlay\_slidebottom](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom)

To the site I am creating

Can anyone help?

Thanks

Allen

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [January 18, 2023, 7:32am UTC](https://community.hubspot.com/t/importing-code-css-to-hubspot-site/73070/2 "2023-01-18T07:32:02Z")

</div>

Hi @ALang-Norris,

if you’re planning to use this functionality multiple times on your page, I’d recommend to create a custom module with your layout and all the Hubl functions that you need.

To recreate the provided example as a custom module you have to do it like this:  
**create a new custom module**  
If you’re working with the design tools, open the folder you like to have the module in and select File-\> New file in ‘FOLDER-NAME’. In this example mine is called ‘anton-test’. Select ‘module’ in the first pop-up; set a name, decide for which page types(can be changed later) you would like to use the module and if it should be a global or local module(this **can’t** be changed later through the design-tools)

 ![Anton_1-1674025051863.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/7/c739010a27cdf58a7d35bec03952309e6182555b.png)

paste the html part of your module inside the html-hubl area

```lia-code-sample
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>

<div class="slideUpCard">
 <img src="img_avatar.png" alt="Avatar" class="image">
 <div class="overlay">
 <div class="text">Hello World</div>
 </div>

```

and the css part into the css area

```lia-code-sample
.slideUpCard {
 position: relative;
 width: 50%;
}

.image {
 display: block;
 width: 100%;
 height: auto;
}

.overlay {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: #008CBA;
 overflow: hidden;
 width: 100%;
 height: 0;
 transition: .5s ease;
}

.slideUpCard:hover .overlay {
 height: 100%;
}

.text {
 color: white;
 font-size: 20px;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 text-align: center;
}

```

**note: since ‘container’ is a very common class I’ve changed it to avoid rendering issues**

Next step would be to add hubls to have the ability to change the content of this module without the need to edit the html.

Since there are 3 text elements and one image add those fields through the right sidebar and give them a proper name like

- headline
- subline
- content
- image

tipp: use simple text fields instead of rich-text if you want to have fixed styling in all instances

The last step is to add the added fields to your code. To do so change your html like this

```lia-code-sample
<h2>{{ module.headline }}</h2>
<p>{{ module.subline}}</p>

<div class="slideUpCard">
 <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" class="image">
 <div class="overlay">
 <div class="text">{{ module.content }}</div>
 </div>

```

done.

There are a lot more things you can do like add [conditional logic](https://developers.hubspot.com/docs/cms/hubl/if-statements) to each line so it will be only be visible if the field is not empty, change some CSS in each instance of the module and other cool stuff.

If you don’t plan to have the headline and subline in each instance you can write it like this

```lia-code-sample
{% unless module.headline == "" %}
<h2>{{ module.headline }}</h2>
{% endunless %}

{% unless module.subline == "" %}
<p>{{ module.subline}}</p>
{% endunless %}

<div class="slideUpCard">
 <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" class="image">
 <div class="overlay">
 <div class="text">{{ module.content }}</div>
 </div>

```

if you want to change CSS per instance it needs to be inside the html-hubl part. You can add style fields in the right sidebar

 ![Anton_2-1674026469791.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/e/5eb581e0e311efe6edd3507fa8494c0583b61f26.png)

the html-hubl part should look like this

```lia-code-sample
{% require_css %}
<style>
.slideUpCard.card-{{ name|md5 }} .overlay{
background-color:{{ module.styles.overlay_color.css }};
}

.slideUpCard.card-{{ name|md5 }} .text{
color:{{ module.styles.text_color.css }};
}
</style>
{% end_require_css %}

{% unless module.headline == "" %}
<h2>{{ module.headline }}</h2>
{% endunless %}

{% unless module.subline == "" %}
<p>{{ module.subline}}</p>
{% endunless %}

<div class="slideUpCard card-{{ name|md5 }}">
 <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" class="image">
 <div class="overlay">
 <div class="text">{{ module.content }}</div>
 </div>

```

note that I’ve added ‘card-{{ name|md5 }}’ to the code. This will add a (random) generated class to each instance so the CSS changes will only affect this particular instance and won’t mess with all instances on one page.

hope this helps

best,

Anton

---

<div class="post-metadata">

**Author:** ![ALang-Norris](https://avatars.discourse-cdn.com/v4/letter/a/5fc32e/32.png) [@ALang-Norris](https://community.hubspot.com/u/ALang-Norris)\
**Post date:** [January 18, 2023, 12:59pm UTC](https://community.hubspot.com/t/importing-code-css-to-hubspot-site/73070/3 "2023-01-18T12:59:04Z")

</div>

Anton, you are a legend. This is just what I needed and very informative. Thank you