Text on modal "Play Demo"

[Peter789]

Hi there,

I want to achieve effect that on hover below play button to appear text “Play Demo”.

Is that possible on modal?

[ruenel]

Hello Peter,

Thanks for writing in! Yes, you can. You may need to do this:
1.) Insert a DIV element next to the Play icon and position it as Absolute
2.) Set the width and height to 100%.
3.) Enable Effects and set the opacity to 0.
4.) Set the Interaction effect and the opacity should be 1.
5.) Insert a Text element inside the DIV element that says Play Demo

Kindly let us know how it goes.

[Peter789]

Hi Ruenel,

That seems that it does not work, probably because the columns bugged out? Can you please check on your end

I’ve attached below a temporary login.

Also, how can I make the columns on Mobile screens to be 1, 3, 2 instead of PC 1, 2 ,3 position?

[tristup]

Hi Peter,

I would suggest you have two more Row inside the first column, and add one column on each row with the content of the first column. In that way, the design will be as it is on desktop, and on mobile it will come as you are expecting it.

Hope it helps.
Thanks

[Peter789]

Okay I’ll try that! Thank you

But can we get back into the “Play Demo” that I want to appear when hover play button? I’m not sure how can I do that with the settings that Ruenel told me

[tristup]

Hi Peter,

Just follow the way explained by my colleague Runel, if you have any difficulties please let us know.
Please note that always create a new ticket for a new topic to avoid any confusion.

Thanks

[Peter789]

Can you show me an example of what you mentioned since I am a bit confused please?

[marc_a]

Hey Peter,

Yes, we can show an example on your website but we need the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[Peter789]

Thank you so much!

I’ve attached it below

[ruenel]

Hello Peter,

Your element structure should be like this:

Follow the steps I mentioned so that you will have something like this:

Hope this makes sense.

[Peter789]

Oh wow! Thank you so much

Looking at what you’ve done I would definitely not know how to do that! I really appreciate your help

[Peter789]

I noticed an issue @ruenel

When I hover below the play button div, the “Play Demo” text appears… how can I fix this please?

[ruenel]

Hello Peter,

The Effects > Link Child Interactions option of the Column element needs to be disabled.

It should only be enabled in the DIV element containing the Play button and the Play Demo Wrapper.

Cheers.

[Peter789]

That works! Thank you so much for your help

[tristup]

Hi Peter,

Glad that we are able to help you.

Thanks