CTA transparent hover

[#1]

Hi

We're starting to implement HubSpot CTAs on our WordPress website.

I would like them to go slightly transparent when website visitors hover over them, so they look more clickable.

I got in touch with HubSpot support about this and we managed to solve it for some buttons. See the 'Get In Touch' button in the top banner of this page: https://www.chocolatevideoproduction.co.uk/sectors/corporate-video-production/?__hstc=51647478.37d7f...

This has been done by:

- changing the CTA in HubSpot from an Image Button to a Custom Button

- changing the source code and making it refer to the image we want

<img alt="Your alt text here." src="Your image URL here." />

 - adding Custom CSS

.container:hover .image {

  opacity: 0.7;

}

This works on all the 'Get In Touch' buttons on the top banners of the website pages (click through the site and you'll see it).

Now, I would like the same effect on other CTA buttons, for example:

- The 'Ask Us About Event FIlming' button on this page: https://www.chocolatevideoproduction.co.uk/portfolio/govtech-summit-2018/

- All CTA buttons on this page: https://www.chocolatevideoproduction.co.uk/sectors/arts-culture/online-video-for-galleries/

Applying it the same way does not work. HubSpot support replies: "it looks like there may be something on the page itself that's causing the styling to not come through. Typically we see this from a conflicting script that's present on the page, but it can also come down to variables in the style sheets for the page, as well."

Does anyone have advice on how I can solve this?

Many thanks

[#2]

It's not working because the same class doesn't exist on the other pages. On the homepage the <a> tag has a class of "cta_button image". The css code you have is correctly finding the container then the image class and applying your hover styles. This still seems a bit dangerous because if anything else in that container ever has a class of "image" these styles are going to change them too. The other pages <a> tags do not have that class, so they'll never change style with that css code. 

Can you add a custom class to the images or anchor tags? Then you can target all of the CTAs at once and nothing else will be at risk.  Or you could inspect the live page and use a class that is accessible to call it out that way.

[#3 · Accepted solution]

Hi the problem is that that CSS selector wouldn't apply to those CTAs

It's looking an element with the class .image inside of an element with .container as a class
Your CTA doesn't have the class .image, and it's not inside of an element with .container as a class.

A better selector to use would be the .hs-cta-wrapper class as every CTA will have that.

.hs-cta-wrapper:hover img {
    opacity: .5;
}

Add that to your stylesheet or wherever you added the code HS support gave you.

The code HubSpot gave you, you should also remove. it's really generic and could cause you some trouble.

The code I'm giving you is still generic, really you should have a custom class you're applying to the CTA, but I'm guessing you're not a developer, and just need to get the task done, and this will do that. Be aware it will apply the affect to all CTAs on your site, where those that stylesheet is loaded.

[#4]

@ChocolateFilms-- noticed that you had a transition on the a tag, if you want that transition, you should move it to the img.

container .image img:hover {
    opacity: 0.7;
    transition: opacity 0.2s linear;
   -moz-transition: opacity 0.2s linear;
   -webkit-transition: opacity 0.2s linear;
}

[#5]

Hi Jon

Only just found the time to get back on this.

Thank you so much, it works! I've been able to update all CTAs on our website.