[Resolved] Create overlay on image hover with custom data fields

[Author]

Posts

[Marcel]

I'm trying to create an overlay with custom data fields on hover on this page (which is a template): hidden link.

I actually got most of it to work already, but I can't get the hover state to be on the data block instead of the image. So when I use Chrome inspector to set the state of the block containing the date to hover, it works as intended, but when I just hover on the page, it doesn't. That's probably because the hover state is set on the image, not on the data block.

I've made a screencapture to show the problem: hidden link

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

Hello and thank you for contacting the Toolset support.

I tried to investigate this on your website using the devtools, but I might need access to your backend the check the view closer. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Marcel]

Sure, no problem. You can login with the following credentials:

hidden link

EDITED - it wasn't so private after all... visiting this topic in an incognito window, only the link was hidden. The rest of the info was visible so I deleted it..

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

My apologies, maybe I forget it. If it happens again, it is probably an issue I should report to our system team.
Now, I made sure it is now private.

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

Thank you for the access and my apologies for the late reply.

I did not touch your view to let you decide how to implement the on-hover effect. From what I understand, you want to display only the image. And on hover, hide the image and display the texts behind it, right?
Please check my test content template on this test post: hidden link
Check the custom CSS and the CSS class used inside the template: hidden link

I hope this helps. Let me know your feedback.

[Marcel]

Hi Jamal,

Thanks to your test template, I got it to work 🙂 I didn't think of setting the image as a background. Thanks for the great support (as always with Toolset)!