Hi, first I did already Google for a solution, but everything is with hidden links. This sounds very much like what I want to achieve. https://toolset.com/forums/topic/create-overlay-on-image-hover-with-custom-data-fields/
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.
I used the CSS from the following example as I am not very efficient with CSS hidden link
I run the test inside this test site hidden link
Check the content template here hidden link
And this is the result that I got https://toolset.com/documentation/programmer-reference/views/views-shortcodes/
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.
My issue is resolved now. Thank you!
