From a UX perspective it'd be best to show at least a title on the non-hovered state. It helps users know what each section is without hovering and also makes it more obvious that they are hoverable and not just weirdly segmented image.
Looks nice and works well, @ferry!
A comment/critique: this demo seems like it would be best suited using flexbox — I wonder if you could ditch all the percentage hardcoding and let flexbox do all of the width calculations on the fly, thus allowing you to add or remove items from your accordion without needing to change CSS.
Let me know if you get a chance to try it out!
Something like this, Kyle ?
@NeedHate yep! It looks like a side-effect of your pen is non-highlighted items "bounce" their width a bit when moving between items. I wonder how to mitigate that... @ferry 's pen here is so smooth!
Hey, very nice work.
I tried to fork it, so that the h2 tag is always visible.
My problem is when the accordion collapses the words go up and disappear on the top half (or more). How can I achieve, that the h2 tag does not go up and just stays on the right height (so that it fits into the box). best regards and nice work!
How to make it work off line?
I just copy pasted the html and css and run it it firefox.
But its not like this.
I am not familair with scss.
How to mkae it work?
Need to know how to enable it? Go here.