# Hover on Image with CTA

**URL:** <https://community.hubspot.com/t/hover-on-image-with-cta/18255>\
**Category:** CMS Development\
**Tags:** design-manager, css\
**Created:** [January 21, 2020, 10:23pm UTC](https://community.hubspot.com/t/hover-on-image-with-cta/18255 "2020-01-21T22:23:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kcarpintieri](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kcarpintieri/32/84489_2.png) [@kcarpintieri](https://community.hubspot.com/u/kcarpintieri)\
**Post date:** [January 21, 2020, 10:23pm UTC](https://community.hubspot.com/t/hover-on-image-with-cta/18255/1 "2020-01-21T22:23:42Z")

</div>

Hi there,

I am trying to edit my image/cta module so that it hovers and displays a CTA. However, I can’t seem to get the code right - the hover/cta itself is appearing below the image. I’ve looked at various resources but my case is so unique, I’m not sure what code to edit. If anyone has any suggestions, I would be very grateful! Thank you 🙂

Link: [https://learn.barcoding.com/?hs\_preview=qcfzgXQe-24664026644](https://learn.barcoding.com/?hs_preview=qcfzgXQe-24664026644)

**Image/CTA module code:**

{% if module.target == true %}  
{% set target = “\_blank” %}  
{% else %}  
{% set target = “\_parent” %}  
{% endif %}

{% unless (module.link is string\_containing “//”) or (module.link is string\_startingwith “/”) or (module.link is string\_startingwith “mailto”) or (module.link is string\_startingwith “#”) or !module.link %}  
{% set link = “//” ~ module.link %}  
{% else %}  
{% set link = module.link || “” %}  
{% endunless %}

{% linked\_image  
label=“Linked Image”,  
src=‘{{ module.img.src }}’,  
alt=‘{{ module.img.alt }}’,  
width=‘{{ module.img.width }}’,  
height=‘{{ module.img.height }}’,  
link=‘{{ link }}’,  
target=‘{{ target }}’,  
open\_in\_new\_tab=‘{{ target }}’,  
size\_type=‘{{ module.img.size\_type }}’,  
max\_width=‘{{ module.img.max\_width }}’,  
max\_height=‘{{ module.img.max\_height }}’,  
cta guid=“{{ module.cta\_field }}”,  
%}

\<div class=“resource-box {{ linked\_image }}”\>  
\<div class=“resource-inner”\>  
\<div class=“res-boximg bgimg-set” style=“background-image: url(‘{{ linked\_image }}’)”\>  
{% if linked\_image %}  
\<div class=“resource-imgbox” style=“background-image:url({{ linked\_image }})”\>  
\</div\>  
\</div\>  
{% endif %}  
{% else %}  
{% endif %}  
\</div\>  
\<div class=“resource-Isocta”\>  
{% cta guid=“{{ module.cta\_field }}” %}  
\</div\>  
\</div\>  
\</div\>

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [January 22, 2020, 2:10am UTC](https://community.hubspot.com/t/hover-on-image-with-cta/18255/2 "2020-01-22T02:10:30Z")

</div>

If you’re wanting the entire element to be clickable I would forgoe using a Hubspot CTA and just using a link and text.

**HTML + HUBL**

```auto
{% if module.target == true %}
 {% set target = "_blank" %}
{% else %}
 {% set target = "_parent" %}
{% endif %}

{% unless (module.link is string_containing "//") or (module.link is string_startingwith "/") or (module.link is string_startingwith "mailto") or (module.link is string_startingwith "#") or !module.link %}
 {% set link = "//" ~ module.link %}
{% else %}
 {% set link = module.link || "" %}
{% endunless %}

<{% if link %}a href="{{ link }}"{% else %}div{% endif %} class="resource-box">
 <div class="resource-inner">
 <img src="{{ module.img.src }}" alt="{{ module.img.alt }}" width="{{ module.img.width }}" height="{{ module.img.height }}" class="resource-box-img" />

 <div class="resource-box-cta">
 <p class="button">
 {{ module.text_field }}
 </p>
 </div>
 </div>
</{% if link %}a{% else %}div{% endif %}>

```

**CSS**

```auto
​.resource-box {
 display: block;
}
.resource-box-img {
 width: 100%;
 height: auto;
}
.resource-inner {
 position: relative;
}
.resource-box-cta {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: #f38b00;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: all 0.3s;
 transform: scale(0);
}
.resource-box-cta .button {
 background-color: white;
 padding: 1em 2em;
 border-radius: 5px;
 color: #f38b00;
}
.resource-box:hover .resource-box-cta {
 opacity: 1;
 transform: scale(1);
}

```

---

<div class="post-metadata">

**Author:** ![kcarpintieri](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kcarpintieri/32/84489_2.png) [@kcarpintieri](https://community.hubspot.com/u/kcarpintieri)\
**Post date:** [January 22, 2020, 12:23pm UTC](https://community.hubspot.com/t/hover-on-image-with-cta/18255/3 "2020-01-22T12:23:22Z")

</div>

Thanks, Alyssa! I will test that out. I actually need to use CTA’s so I can track who clicks on what. I think i have to use CTA’s somehow.

---

<div class="post-metadata">

**Author:** ![kcarpintieri](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kcarpintieri/32/84489_2.png) [@kcarpintieri](https://community.hubspot.com/u/kcarpintieri)\
**Post date:** [January 22, 2020, 12:46pm UTC](https://community.hubspot.com/t/hover-on-image-with-cta/18255/4 "2020-01-22T12:46:50Z")

</div>

I’ve done something like it before, I’m just changing the design and the layout.

[https://learn.barcoding.com/brand-guide/wallpapers](https://learn.barcoding.com/brand-guide/wallpapers)

I’m trying something more simple now. Since I want a CTA, I just decided to do the Image Button - which is working great. I’m just curious if it’s possible to make it hover and show up the text “Download”? I’m just not sure if it’s possible.

Preview: [https://learn.barcoding.com/?hs\_preview=qcfzgXQe-24664026644](https://learn.barcoding.com/?hs_preview=qcfzgXQe-24664026644)

---

<div class="post-metadata">

**Author:** ![Jenny](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jenny/32/24_2.png) [@Jenny](https://community.hubspot.com/u/Jenny)\
**Post date:** [January 30, 2020, 9:01pm UTC](https://community.hubspot.com/t/hover-on-image-with-cta/18255/5 "2020-01-30T21:01:07Z")

</div>

Hi @alyssamwilie do you have any further advice for @kcarpintieri?

Thanks,  
Jenny

---

<div class="post-metadata">

**Author:** ![kcarpintieri](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kcarpintieri/32/84489_2.png) [@kcarpintieri](https://community.hubspot.com/u/kcarpintieri)\
**Post date:** [January 30, 2020, 9:03pm UTC](https://community.hubspot.com/t/hover-on-image-with-cta/18255/6 "2020-01-30T21:03:58Z")

</div>

Thanks, Jenny!

This is what my pages look like now. I was trying to get them to hover and say “Click to Download”, but nothing I tried was successful.

[https://learn.barcoding.com/brand-guide/wallpapers-feb2020](https://learn.barcoding.com/brand-guide/wallpapers-feb2020)

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [January 31, 2020, 3:31am UTC](https://community.hubspot.com/t/hover-on-image-with-cta/18255/7 "2020-01-31T03:31:29Z")

</div>

If you’re okay with just the CTA being clickable and not the whole box then you can adjust my previous code to this:  
HTML

```auto
{% if module.target == true %}
 {% set target = "_blank" %}
{% else %}
 {% set target = "_parent" %}
{% endif %}

<div class="resource-box">
 <div class="resource-inner">
 <img src="{{ module.img.src }}" alt="{{ module.img.alt }}" width="{{ module.img.width }}" height="{{ module.img.height }}" class="resource-box-img" />

 <div class="resource-box-cta">
 <p class="button">
 {% cta guid="{{ module.cta_field }}" %}
 </p>
 </div>
 </div>
</div>

```

CSS

```auto
.resource-box {
 display: block;
 max-width: 400px;
}
.resource-box-img {
 width: 100%;
 height: auto;
}
.resource-inner {
 position: relative;
}
.resource-box-cta {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: #f38b00;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: all 0.3s;
 transform: scale(0);
}
.resource-box:hover .resource-box-cta {
 opacity: 1;
 transform: scale(1);
}

```

Or another option for using my first posted code is to create tracking URLs in place of the CTAs. [Create tracking URLs](https://knowledge.hubspot.com/settings/how-do-i-create-a-tracking-url)  
Hope this helps.