Hover on Image with CTA

Develop, Build & Integrate CMS Development
,
1

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 :slightly_smiling_face:

Link: 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>

2

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

{% 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

​.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);
}
3

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.

4

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

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

5

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

Thanks,
Jenny

6

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

7

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

{% 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

.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
Hope this helps.