Styling the back of an image – after rotation

Design help Animations & Interactions
1

Hey all, i’ve made a nice ‘y’ axis 3D image rotation, and subsequently hidden the back of the image. Which seems to work great.

Only issue being – I want the image rotation to reveal some snippet body copy from my collection list. which is currently overlaid on top.

Any ideas how this can be achieved? Any help much appreciated

Here is my public share link: [[LINK][1]]
(Webflow - Acumentice | EXPERIMENTS)

2

Hi Andy!
For making this, you’ll need to create an animation, instead of just a hover state.

  1. Delete the rotation from the hover state of the image

  2. Instead of using a link for all the text, use a regular text block/paragraph

  3. Get the image and the text on the same div block (to make the animation easier)
    Screen Shot 2023-04-13 at 9.09.06

  4. Create the animation that is going to rotate the image and reveal the text

    Screen Shot 2023-04-13 at 9.15.58
    Screen Shot 2023-04-13 at 9.15.581920×951 153 KB

    Uploading: Screen Shot 2023-04-13 at 9.15.50.png…

And do the one for the text the other way around (start at -90, finish at 0)

  1. Create the hover-out animation

    Screen Shot 2023-04-13 at 9.14.17
    Screen Shot 2023-04-13 at 9.14.171920×922 169 KB

    Screen Shot 2023-04-13 at 9.14.55
    Screen Shot 2023-04-13 at 9.14.551920×890 167 KB

  2. Add a children perspective, so the animation looks better

    Screen Shot 2023-04-13 at 9.13.38
    Screen Shot 2023-04-13 at 9.13.38480×944 42.3 KB

And that’s it, let me know if it helps and if you have any questions!

3

Jorge you are an absolute hero – thank you so much for this!! It is looking BRAND NEW!

Please do take a look if you are interested. You nailed it :muscle:

Have a great day