Hover on Image with CTA

SOLVE
Highlighted
Regular Contributor

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 Smiley Happy

 

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>

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Top Contributor | Diamond Partner

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

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

6 Replies 6
Top Contributor | Diamond Partner

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

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

Regular Contributor

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. 

Reply
0 Upvotes
Regular Contributor

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

Reply
0 Upvotes
Community Manager

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

 

Thanks,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Regular Contributor

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

Reply
0 Upvotes
Top Contributor | Diamond Partner

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.

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!