Text + CTA Appears whilst hovering

Develop, Build & Integrate CMS Development
1

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

2

Heyo @ColmK1997

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

3

Hi Dennise,

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

4

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

5

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 :slightly_smiling_face:

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

best,

Anton