Show button in call to action button on hover

Hello,

I created a carousel using slick.js with call to action modules and it works perfectly.

I want to hide the button and show it when hover on the full call of action module and not only on the button when hovered.

I know it's possible to hide the content using a column background image/color, but I use only one column which contains several call of action modules (working using slick.js).

If someone has a CCS or JS code, it would be really appreciated.

Thank you in advance for your feedback.

 

Hello Milos,

I cannot share the URL as I just created a private test page. My question is not related to slick.js (it was here just to explain).

My problem is that I want to know how to change the call to action button when we move the cursor over the whole call to action module and not only on the call to action button.

It works only if you enter two button texts : one for the normal status and one for the hover status.

But it doesn't work with color, shape, etc...

I think the button text is in another field or something like that.

So I would like to know how to change this call to action button when the whole call to action module is hovered.

 

You are a king!! It works perfectly, thank you very much !!

Now, I wanted to know how to only change the background color and add the arrow icon when the cursor hovers the entire CTA module (as it's possible to do it on the button inside the module but it works only when we hover only on the button). I don't know if I have to create a new post and you can reply here.

Many thanks !

 

You are a Master !!

It works perfectly !! The only thing I didn't fixed is the color of the text of the button I wanted it changed on hover (on the whole CTA module).

I tried to add "color: white!important;" in the code above but it doesn't work. This is a text-link and it's a <a> tag with two classes : et_pb_button and et_pb_promo_button.

I added the et_pb_button in the code, but it's worst (the button does not change at all but the arrow which appears correctly).

If you have the solution, it would be really appreciated

Thanks.

 

It doesn't work. It does not change the text color when the whole CTA module is hovered.