CMS Development

kcarpintieri
Participant

Hover on Image with CTA

SOLVE

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>

 

0 Upvotes
1 Accepted solution
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Hover on Image with CTA

SOLVE

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

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

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

View solution in original post

6 Replies 6
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Hover on Image with CTA

SOLVE

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

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

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
kcarpintieri
Participant

Hover on Image with CTA

SOLVE

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

0 Upvotes
jennysowyrda
Community Manager
Community Manager

Hover on Image with CTA

SOLVE

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

 

Thanks,
Jenny

0 Upvotes
kcarpintieri
Participant

Hover on Image with CTA

SOLVE

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

0 Upvotes
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Hover on Image with CTA

SOLVE

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.

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

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
kcarpintieri
Participant

Hover on Image with CTA

SOLVE

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. 

0 Upvotes