So I have 2-4x4 grids, one on top of the other. The bottom grid has words in each tile and the top grid has a single image covering the whole grid. I am attempting to get each top tile to flip to 0 degrees from 90 and become invisible so the words are uncovered from below, but am having issues. I can get the tile to flip to 0 degrees but not back to 90 degrees and it’s glitchy. Any help would be awesome!
But how do i still have get one single image on top? The initial idea was to get it to break up when the tile flipped over (hover on, hover off), and then the text would display underneath.
OK, it was becoming a bit heavy on text so I just set it up for you to study and replicate. Note that everything that I modified on every layer in my example is important.
One last question, I’ve followed everything you did but i seem to be missing something…
The last thing i did is set the position of the H7 heading to absolute. But, it then changes the dimensions of the whole top row of the grid to a smaller height? What am i missing?
Do not rotate the interaction trigger. The “home screen hover” should not be rotated. Consider this: if this is an element that needs to be hovered on, then once you rotate it, you are no longer hovering it since it essentially disappears (after rotation), the hover focus is lost, hover out action is triggered, animation becomes jittery not knowing what to do.
Make sure your hover object and your rotating element are different. In other words, target “image” in your interaction not “home screen hover”.
I am verbose because I want you to understand what’s going on, not simply do what I say and forget about it.