So if you scroll part way down this page you will see a 2nd “Gas Station” section. I am trying to upgrade my slides to be more interactive and allow for mouseovers of the numbers in the image to swap to the specific slide rather than tapping the slide nav numbered buttons.
I’ve sort of got it working with the following:
- Absolutely positioned div holder
- Each “slide” has its own absolutely positioned div (so they all stack on top of each other) and everything but the first one is hidden.
- Another absolutely positioned div holder
- 6 Columns in this div to make positioning the mouseover divs easier
- Each number has its own absolutely positioned div (with top/left/bottom/right using percentages) which represents the mouseover target
- Each mouseover div has a hover interaction which shows/hides the relevant slide
- To make this all work smoothly the mouseover divs have a z-index of 3, the slides have a z-index of 2 and the original slide has a z-index of 1
My question is that positioning is not suuuuper good as I scale across breakpoints and the entire thing feels really really annoying and painful to setup. I am going to have to do this for about 10 other mouseover slide sections so I am dreading the process if/when it comes to that. Am I doing this really badly? Can I make it simpler in any way? Thank you ahead of time, really appreciate it!!
Here is my public share link: https://preview.webflow.com/preview/ivis-usa?utm_medium=preview_link&utm_source=designer&utm_content=ivis-usa&preview=1fd73a4e80f88bae13d0d1ef9037f296&pageId=610374b67ae1da4ed37d407b&workflow=preview