Hover on Image with CTA

[kcarpintieri]

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 

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>

[amwilie · Accepted solution]

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);
}

[kcarpintieri]

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. 

[kcarpintieri]

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

[jennysowyrda]

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

Thanks,
Jenny

[kcarpintieri]

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

[amwilie]

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. https://knowledge.hubspot.com/settings/how-do-i-create-a-tracking-url

Hope this helps.