Hey everyone,
I was wondering if I could get another set of eyes on this to help me solve this puzzle. Making this fluid for various sized windows.
Please just look at first blue accordion item.
On rollover, the targeted accordion item expands to 50% width. Everything else collapses to 16.66%.
On click, the first slide expands to 100% width.
My issue is with the contents of the slide container. The slide container needs to be made up of 50% image and 50% white text box.
In this codePen, you will see I sort of finagled something together where as the container expands to 100% the image quickly changes to 50%. Its a little janky and you can see the tween sort of jerk. Not really ideal:
Here I start out with the blue image and the white text box both being set to 50%. But as you can see, rather than being 50% of the entire experience, they are 50% of the containers current 25% state. When you click to expand it goes to where it needs to be.
Here is a quick, thrown together wireframe of what i'm trying to accomplish. I figured percentages were the way to go because I needed a fluid experience. Maybe i should explore a different path? Any ideas or guidance would be great.