This support ticket is created 3 years, 3 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.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
So, basically I want to hover over an image, want to create a dark overlay like black with 20% transparency, and then I want to display some custom fields as overlay. Data like name, age and maybe 1-2 other fields.
With regular HTML and CSS and ACF which I used before I would know how to do it but with Toolset and Blocks, I am totally lost. Sorry 🙂
Hello and thank you for contacting the Toolset support.
I assume that you are building this inside a view or a content template, right? If yes, both views and content templates have a custom CSS section. You can put your custom CSS code there. And, instead of adding an image block, use a container block and set its background to use an image with dynamic source. You can also add a class or ID to the advanced section of the view or the content template. Inside the container, put the data that you want to display. And add the required CSS to implement the hover effect. Does it make sense?
I hope this helps. Let me know if you have any questions.
Thanks for the prompt reply. To be honest, I am not really sure yet. Is there a sample somewhere? I had a look at your sample sites but did not see anything like this.
So, I implemented the same structure except the following:
- I used the image as a background from the container div hidden link
- Slight changes on the CSS, that are not relevant to the use case(width, min-height of the container div),
- I used another container to hold the texts and to show them on hover.
- I used regular data instead of creating custom fields, but you will see how I used the Single field block. You can use it for the custom fields, or you can use the Fields&Text block with shortcodes. https://toolset.com/documentation/programmer-reference/views/views-shortcodes/
I hope this helps. Let me know if you have any questions.
