Help recreating a design effect

Hi guys,
can anybody give me an idea how to recreate the hover effect just like in the attached video but with CMS items? The main target is on hover over the text of the CMS item, the background of the whole page to change to its relevant image defined in the CMS item.

I ran out of CSS/HTML ideas and i’m completely stuck. If anyone can hint me the solution, i’m gonna buy a beer :smiley:


No public link since this project is private during client requirements…

Have you tried a series of fixed background divs with backgrounds that you can switch between display:block/none on hover of these different elements?

I thought of it but i didn’t figured out how to do it with CMS items… If this was static texts and backgrounds it’s easy to recreate it - giving each unique ID or something else then trigger display: none/block on hover and the work is done. But i need to be done with dynamic items from the cms Collection and this is where the problem is…

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.