Skip Navigation

[Resolved] Interface Messed Up While Createing Image Overlay on wpv-loop

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user wanted to add a text overlay on their images.

Solution:

What I recommend that you do is to emulate a bootstrap based hover effect like these below.
https://miketricking.github.io/bootstrap-image-hover/

This support ticket is created 5 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 6.71 hours from now. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 3 replies, has 2 voices.

Last updated by nicoleM 5 years, 9 months ago.

Assisted by: Shane.

Author
Posts
#1191152

Hi, i try to create image overlay similar to this : hidden link

but the problem is when you using it on wpv-loop the interface messed up.

is there any tricks to generate unique css id on wpv-loop?

my client site is :
hidden link

Thank You

#1191234

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Nicole,

Thank you for contacting our support forum.

Would you mind allowing me to have admin access to the site so that I can check this out for you?

The private fields have been enabled.

Thanks,
Shane

#1192631

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Nicole,

The issue here is definitely a conflict between the css that you got and bootstrap default css.

What I recommend that you do is to emulate a bootstrap based hover effect like these below.
hidden link

You should be able to click on them to see how they are done.

Thanks,
Shane

#1205158

My issue is resolved now. Thank you Shane!