I am trying to make a main ‘work’ banner full screen width on my companies site (‘A’)
When a user hovers over any of the 4 images (the 4 colours), that image gets fully revealed left & right across screen width (‘B’).
Then when the image is clicked on a url vimeo/youtube link plays full width (‘C’) or an image loads full width with a close ‘X’ in the top right corner taking you back to ‘A’
This idea/pattern was more in “fashion” beforeresponsive design (How to implement this style on mobile?) - So, I don’t think it will be so easy to find update (2017 code) Plugin for this idea.
I think the best solution is to hide this accordion on mobile (and show regular video gallery).
First find the plugin you want & learn the docs - than you should add custom code, add CSS/JS (CDNs), Add the correct class and HTML structure and that’s it (Try to implement fullpage.js or slick (a lot of forum topics about this two)- to learn how-to integrate webflow with some JS-library) - and last initialize.
OPTION TWO - by webflow interactions
I dont know if this could be made by interactions, but give at a try
Hi there, thanks for the reply Siton_Systems, it doesn’t seem to work even if I forget the accordion system, even if I just have the four colours from ‘A’ as ‘clickable’ links to open a lightbox, they dont do anything.
Effectively I’m looking for a banner that is screen width that holds four images (the four colours in ‘A’) and wen you click on one it loads the video url or image fullscreen.