CMS Development

ColmK1997
Participant

Text + CTA Appears whilst hovering

SOLVE

Hi everyone, 

 

I have drafted this page: https://www.privacyengine.io/data-protection-academy-0?hs_preview=tbVXwzri-43579617954

 

Down in the "Upcomming Webinar" section,  you can see 5 images that zoom in when you hover over them. Can someone tell me how I can make a CTA pop up from the bottom as you hover over it aswell (e.g "Register Now") . It would be great to also have text appear in front of the picture too if that possible. (not planning on uising the cuurent pictures, just there to show an example). 

 

Thanks

0 Upvotes
1 Accepted solution
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Text + CTA Appears whilst hovering

SOLVE

Hi @ColmK1997

I've done it with bootstrap4 modals several times

Modal · Bootstrap documentation 

So basicly you create a modal box(i would suggest a custom module), which contains a regular form and bind the opening event to a class. This class can be either a existing class which your images have or you create a new one - up to you 🙂

 

If you don't use Bootstrap4 - you have to include everything what is needed for the modal. jQuery, Bootstrap, popper, modal.css

 

 

best, 

Anton

Anton Bujanowski Signature

View solution in original post

4 Replies 4
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Text + CTA Appears whilst hovering

SOLVE

Hi @ColmK1997

I've done it with bootstrap4 modals several times

Modal · Bootstrap documentation 

So basicly you create a modal box(i would suggest a custom module), which contains a regular form and bind the opening event to a class. This class can be either a existing class which your images have or you create a new one - up to you 🙂

 

If you don't use Bootstrap4 - you have to include everything what is needed for the modal. jQuery, Bootstrap, popper, modal.css

 

 

best, 

Anton

Anton Bujanowski Signature
dennisedson
HubSpot Product Team
HubSpot Product Team

Text + CTA Appears whilst hovering

SOLVE

Heyo @ColmK1997 

Might need a visual for that pop up effect.  @piersg, thoughts?

0 Upvotes
ColmK1997
Participant

Text + CTA Appears whilst hovering

SOLVE

Hi Dennise, 

 

Thank you for getting back to me, it would be great if i could get some help with this. 

0 Upvotes
jonchim
Guide | Diamond Partner
Guide | Diamond Partner

Text + CTA Appears whilst hovering

SOLVE

Hey @ColmK1997,

Not sure if this is the functionality you're looking for but this resource might help point you in the right direction?

https://www.w3schools.com/howto/howto_css_display_element_hover.asp

 






Jon Chim
VP of Design & Development
Hypha HubSpot Development


check Did my post help answer your query? Help the Community by marking it as a solution